Schedule Card Component #444
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,7 @@ | ||
| import { Router } from './router/Router'; | ||
|
|
||
| function App() { | ||
| return <Router />; | ||
| } | ||
|
|
||
| export default App; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
|
There was a problem hiding this comment. iskreno, malo sam zbunjen koji screen u figmi trebam gledat, ali ako sam dobro upratia, po dizajnu nebi tribalo bit točkica ispod naslova u mobilnoj verziji kod tebe: figma: There was a problem hiding this comment. Bojim se da ne razumin ili nesto krivo gledas, tockice se nalaze ispod opisa u jednom i u drugom slucaju. kad postoje zahtjevi bit ce tockice i ispod njih. sta se tice dijelova komponente, vjerojatno su malo razbaruseni bas zbog dizajna prema kojem se tocno neki dijelovi moraju prikazivat/sakrit kad je kartica otvorena/zatvorena. sta se tice brzine otvaranja, prema mojoj procjeni (kako nije naglaseno u dizajnu) reka bi da je okej. ako ne valja ostavia bi mihaeli da to prokomentira, lako se namisti kasnije There was a problem hiding this comment. fale točkice ispod voditelja panela kod tebe: figma: There was a problem hiding this comment. ah to je kasnije dodano. sredim (jos san i provjeria s mihaelom rekla je da samo izlistam normalno pa je valjda kasnije popravila da nsian vidia) |
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,205 @@ | ||
| .scheduleCard { | ||
| background-color: $black-5; | ||
| display: flex; | ||
| gap: 14px; | ||
| flex-direction: column; | ||
| border-radius: 16px; | ||
| box-sizing: border-box; | ||
| padding: 24px; | ||
|
|
||
| .addedToSchedule { | ||
| background-color: $black-10; | ||
| box-sizing: border-box; | ||
| padding: 8px; | ||
| border-radius: 8px; | ||
| gap: 10px; | ||
| display: flex; | ||
|
|
||
| .ratingStar { | ||
| height: 16px; | ||
| width: 16px; | ||
| } | ||
|
|
||
| .label { | ||
| margin: 0; | ||
| @include heading-4; | ||
| text-transform: uppercase; | ||
| } | ||
| } | ||
|
|
||
| .timeAndArrow { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
|
|
||
| .time { | ||
| @include tag-14; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .arrowDown { | ||
| cursor: pointer; | ||
| transform: rotate(180deg); | ||
| transition: transform 0.3s ease-in-out; | ||
|
|
||
| &.collapsed { | ||
| transform: rotate(0deg); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .tag { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
|
|
||
| .theme { | ||
| background-color: $primary-muted-orange; | ||
| @include tag-14; | ||
| margin: 0; | ||
| color: white; | ||
| height: 24px; | ||
| width: 46px; | ||
| border-radius: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .label { | ||
| @include tag-14; | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| .eventName { | ||
| color: $primary-black; | ||
| @include paragraph-16; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .collapsibleContent { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 14px; | ||
| transition: | ||
| max-height 0.5s ease-in-out, | ||
| opacity 0.5s ease-in-out, | ||
| margin-top 0.5s ease-in-out; | ||
| max-height: 500px; | ||
| opacity: 1; | ||
| margin-top: 0; | ||
|
|
||
| &.collapsed { | ||
| max-height: 0; | ||
| overflow: hidden; | ||
| opacity: 0; | ||
| margin-top: -16px; | ||
| } | ||
| } | ||
|
|
||
| .eventDescription { | ||
| color: $black-70; | ||
| @include paragraph-16; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .divider { | ||
| padding-top: 6px; | ||
| width: 100%; | ||
| @include dottedBreak(rgba(23, 22, 21, 0.5)); | ||
| } | ||
|
|
||
| .eventRequirements { | ||
| display: flex; | ||
| gap: 8px; | ||
| flex-direction: column; | ||
|
|
||
| .mainLabel { | ||
| @include tag-14; | ||
| margin: 0; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .requirement { | ||
| display: flex; | ||
| gap: 16px; | ||
|
|
||
| .checkContainer { | ||
| height: 20px; | ||
| width: 20px; | ||
| background-color: $primary-muted-orange; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| border-radius: 100%; | ||
|
|
||
| .check { | ||
| height: 8px; | ||
| width: 8px; | ||
| } | ||
| } | ||
|
|
||
| .label { | ||
| margin: 0; | ||
| @include paragraph-16; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .speakers { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 32px; | ||
| } | ||
|
|
||
| .moderatorLabel { | ||
| @include tag-14; | ||
| margin: 0; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| .speaker { | ||
| display: flex; | ||
| gap: 12px; | ||
|
|
||
| .image { | ||
| width: 64px; | ||
| height: 67px; | ||
| } | ||
|
|
||
| .speakerInfoWrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 6px; | ||
|
|
||
| .fullName { | ||
| @include tag-14; | ||
| text-transform: uppercase; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .title { | ||
| @include tag-14; | ||
| text-transform: uppercase; | ||
| color: $black-50; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .logoContainer { | ||
| max-height: 38px; | ||
| max-width: 80px; | ||
| .logo { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: contain; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .button { | ||
| margin-top: 32px; | ||
| } | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ne znam koliko je bitno, ali po dizajnu kad je malo duži naziv pozicije osobe, tekst bi se treba prelomit u dva reda, a kod tebe ostane u jednom redu
kod tebe:
figma:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To je zato sta je u figminoj komponenti sirina kartice tolika da ne moze sire. Evo provjeria san, u figmi je stavljen width na fill sta je ekvivalentno width: 100 % tako da bi sta se tice responzivnosti to i trebalo bit tako