-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Added flippable tiles * Centered tiles, added featured resources text --------- Co-authored-by: “airman416” <“[email protected]”>
- Loading branch information
Showing
6 changed files
with
195 additions
and
0 deletions.
There are no files selected for viewing
65 changes: 65 additions & 0 deletions
65
apps/green-infrastructure/frontend/src/pages/mapPage/FlippableTile.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap'); | ||
|
|
||
| .container { | ||
| font-family: "Lora", sans-serif; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .icon-placeholder { | ||
| width: 60px; | ||
| height: 100px; | ||
| background: #fff; /* White background for the icon placeholder */ | ||
| border-radius: 50%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| color: #555; /* Icon color (gray) */ | ||
| } | ||
|
|
||
| .flip-card-outer { | ||
| width: 330px; | ||
| height: 253px; | ||
| margin: 25px 0; | ||
|
|
||
| &.focus-trigger:focus { | ||
| outline: 5px solid greenyellow; | ||
| outline-offset: 5px; | ||
| } | ||
|
|
||
| .flip-card-inner { | ||
| transform-style: preserve-3d; | ||
| transition: .5s linear .1s; | ||
| position: relative; | ||
| width: inherit; | ||
| height: inherit; | ||
|
|
||
| &.hover-trigger:hover { | ||
| transform: rotateY(180deg); | ||
| } | ||
|
|
||
| &.showBack { | ||
| transform: rotateY(180deg); | ||
| } | ||
|
|
||
| .card { | ||
| backface-visibility: hidden; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
|
|
||
| &.front { | ||
| transform: rotateY(0); | ||
| background-color: #f2f2f2; | ||
| color: #288BE4; | ||
| } | ||
|
|
||
| &.back { | ||
| transform: rotateY(180deg); | ||
| background-color: #f2f2f2; | ||
| color: #288BE4; | ||
| } | ||
| } | ||
| } | ||
| } |
31 changes: 31 additions & 0 deletions
31
apps/green-infrastructure/frontend/src/pages/mapPage/FlippableTile.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { useState } from "react"; | ||
| import './FlippableTile.scss'; | ||
| import "bootstrap/dist/css/bootstrap.min.css"; | ||
|
|
||
| export default function FlipCard({ ...props }) { | ||
| const card = props.card; | ||
|
|
||
| const [showBack, setShowBack] = useState(false); | ||
|
|
||
| function handleClick() { | ||
| setShowBack(!showBack); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flip-card-outer" onClick={handleClick}> | ||
| <div className={`flip-card-inner ${showBack ? 'showBack' : ''}`}> | ||
| <div className="card front"> | ||
| <div className="card-body d-flex justify-content-around align-items-center row"> | ||
| <div className="icon-placeholder col-md-4"></div> | ||
| <p className="card-text text-center">{card.front}</p> | ||
| </div> | ||
| </div> | ||
| <div className="card back"> | ||
| <div className="card-body d-flex justify-content-around align-items-center"> | ||
| <p className="card-text text-center">{card.back}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
apps/green-infrastructure/frontend/src/pages/mapPage/Tiles.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import FlippableTile from './FlippableTile'; | ||
|
|
||
| const cards = [ | ||
| { | ||
| id: "0", | ||
| front: "Submit a Maintenance Report", | ||
| back: "Back" | ||
| }, | ||
| { | ||
| id: "1", | ||
| front: "Click 1", | ||
| back: "Back" | ||
| }, | ||
| { | ||
| id: "2", | ||
| front: "Adapt a GI Feature", | ||
| back: "Back" | ||
| }, | ||
| { | ||
| id: "3", | ||
| front: "Click3", | ||
| back: "Back" | ||
| }, | ||
| { | ||
| id: "4", | ||
| front: "Submit a Condition Assessment", | ||
| back: "Back" | ||
| }, | ||
| { | ||
| id: "5", | ||
| front: "Click5", | ||
| back: "Back" | ||
| }, | ||
| ]; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <div className="resources" style={{ | ||
| display: 'flex', | ||
| padding: '20px 40px', | ||
| flexDirection: 'column', | ||
| alignItems: 'flex-start', | ||
| gap: '15px', | ||
| flexShrink: '0', | ||
| background: 'white', | ||
| }}> | ||
| <p style={{ | ||
| color: 'var(--Text-Primary, #091F2F)', | ||
| fontFamily: 'Montserrat', | ||
| fontSize: '27px', | ||
| fontStyle: 'bold', | ||
| fontWeight: '1000', | ||
| lineHeight: 'normal', | ||
| textDecorationLine: 'underline', | ||
| margin: '0' | ||
| }}> | ||
| <u>FEATURES RESOURCES →</u></p> | ||
| <div className="container"> | ||
| <div className="row d-flex justify-content-center"> | ||
| <div className="col-md-auto text-center"> | ||
| {cards.slice(0, 2).map((card) => ( | ||
| <FlippableTile key={card.id} card={card} /> | ||
| ))} | ||
| </div> | ||
| <div className="col-md-auto text-center"> | ||
| {cards.slice(2, 4).map((card) => ( | ||
| <FlippableTile key={card.id} card={card} /> | ||
| ))} | ||
| </div> | ||
| <div className="col-md-auto text-center"> | ||
| {cards.slice(4, 6).map((card) => ( | ||
| <FlippableTile key={card.id} card={card} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters