feat(main-page): redesign using new components #24
There are no files selected for viewing
This file contains hidden or 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,38 +1,47 @@ | ||
| [ | ||
| { | ||
| "artId":"ghost", | ||
| "bgColor":"Bgc-$artGhost", | ||
| "showSlider": true | ||
| }, | ||
| { | ||
| "artId":"flushed-emoji", | ||
| "bgColor":"Bgc-$artFlushedEmoji", | ||
| "showSlider": true | ||
| }, | ||
| { | ||
| "artId":"penrose-triangle", | ||
| "bgColor":"Bgc-$artPenroseTriangle", | ||
| "showSlider": true | ||
| }, | ||
| { | ||
| "artId":"exploding-head", | ||
| "bgColor":"Bgc-$artExplodingHead", | ||
| "showSlider": true | ||
| }, | ||
| { | ||
| "artId":"clown-emoji", | ||
| "bgColor":"Bgc-$artClownEmoji", | ||
| "showSlider": true | ||
| }, | ||
| { | ||
| "artId":"mushroom", | ||
| "bgColor":"Bgc-$artMushroom", | ||
| "showSlider": true | ||
| }, | ||
| { | ||
| "artId":"robot-hare", | ||
| "bgColor":"Bgc-$artRobotHare", | ||
| "showSlider": true | ||
| }, | ||
| { | ||
| "artId":"funny-cake", | ||
| "bgColor":"Bgc-$artFunnyCake", | ||
| "showSlider": false | ||
| }, | ||
| { | ||
| "artId":"cat", | ||
| "bgColor":"Bgc-$artCat", | ||
| "showSlider": false | ||
| } | ||
| ] | ||
|
Contributor
There was a problem hiding this comment. Нет смысла создавать подобные отдельный файлы на редизайн, может только в некоторых местах. Тут просто ссылки: их набор никак не влияет
Contributor
There was a problem hiding this comment. Еще раз: отдельные файлы с данными для редизайна не нужны |
This file contains hidden or 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,12 @@ | ||
| [ | ||
| { | ||
| "name":"X", | ||
| "icon":"xcom", | ||
| "link":"https://x.com/mlutcss" | ||
| }, | ||
| { | ||
| "name":"Github", | ||
| "icon":"github", | ||
| "link":"https://github.com/mlutcss/mlut" | ||
| } | ||
| ] |
This file contains hidden or 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,22 @@ | ||
| [ | ||
| { | ||
| "link":"#0", | ||
| "text":"Features" | ||
| }, | ||
| { | ||
| "link":"/arts", | ||
| "text":"Art" | ||
| }, | ||
| { | ||
| "link":"#0", | ||
| "text":"Showcase" | ||
| }, | ||
| { | ||
| "link":"https://docs.mlut.style/", | ||
| "text":"Docs" | ||
| }, | ||
| { | ||
| "link":"https://play.mlut.style/", | ||
| "text":"Sandbox" | ||
| } | ||
| ] |
This file contains hidden or 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,28 @@ | ||
| <% | ||
| const css = { | ||
| buttonShape:"-Sz100p D-f Jc-c Ai-c P10 Fns16 Bdrd8 Ts-$shortTs Bd1;s;$brand", | ||
|
Contributor
There was a problem hiding this comment. Pixel perfect нам не нужен, поэтому в большинстве мест лучше |
||
| contentContainer: "D-f Jc-c Ai-c" | ||
|
|
||
| } | ||
|
|
||
| href=`href=${it.url}` | ||
|
Contributor
There was a problem hiding this comment. Тут что-то странное: переменная без |
||
|
|
||
| if (it.variant === 'brand') { | ||
| css.buttonColors = "Bgc-$brand Bgc-$reBrand500_h Bgc-$reBrand600_a"; | ||
| css.span = "Lnh100p Lts0 C#fff"; | ||
| } else { | ||
| css.buttonColors = "Bgc-$btnBg100 Bgc-$btnBg200_h Bgc-$btnBg300_a"; | ||
| css.span = "Lnh100p Lts0 C#22141A"; | ||
| } | ||
|
|
||
| if (!it.tag) { | ||
| it.tag = 'a' | ||
| } else { | ||
| href = '' | ||
| } | ||
| %> | ||
| <<%= it.tag %> <%= href %> | ||
| class="btn <%= css.buttonShape %> <%= css.buttonColors %>"> | ||
| <span class="<%= css.span %>"> | ||
|
|
||
| <%= it.text %> | ||
| </span> | ||
| </<%= it.tag %>> | ||
This file contains hidden or 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,24 @@ | ||
| <% | ||
| if(it.name === "X") { | ||
| css.width = "24", | ||
| css.height = "24" | ||
| } else { | ||
| css.width = "26", | ||
| css.height = "26" | ||
| } | ||
| %> | ||
|
|
||
| <a | ||
| href="<%= it.link %>" | ||
| alt="Link to <%= it.name %>" | ||
|
|
||
| target="_blank" | ||
| class="-Ctx-logo Ps -Sz32 D-f Jc-c Ai-c" | ||
| > | ||
| <svg | ||
| class="Fi-$reAccent900 Fio1 ^logo:h:_Fi-$brand Ts-$shortTs" | ||
| width="<%= css.width %>" | ||
| height="<%= css.height %>" | ||
| > | ||
| <use href="/assets/img/icons.svg#<%= it.icon %>"></use> | ||
| </svg> | ||
| </a> | ||
This file contains hidden or 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,13 @@ | ||
| <input type="checkbox" id="menu-toggle" hidden | ||
| class="-Ctx-burger Zi5 md_D-n"> | ||
|
|
||
| <label for="menu-toggle" | ||
| class="D md_D-n P1u Bd-n Bdrd1u H90p Apcr1 Ps-r Bgc-n Zi5 Tsd-$transD | ||
| D_af,b Ct_af,b W4u_af,b H0.5u_af,b M0;0;1u_af,b Bgc-$reAccent900_af,b Zi10_af,b Bdrd2u_af,b | ||
| Bxsd0;1.5u;0;0;$reAccent900_af | ||
| :c:+_Bgc-$brand :c:+_Bdc-$brand :c:+_Bgc-$reAccent900_af,b :c:+_Bxsd0;1.5u;0;0;$reAccent900_af :c:+_Bdc-n"> | ||
| </label> | ||
|
|
||
| <label id="overlay" for="menu-toggle" | ||
|
Contributor
There was a problem hiding this comment. 2 лейбла на 1 инпут - это что-то странное |
||
| class="Ps-a W100vw Tsd-$transD H100vh T0 R0 D-n Bgc-n :c:~_D :c:~_Bgc#000*60p md_D-n"> | ||
| </label> | ||
|
Contributor
There was a problem hiding this comment. Меняем основной хедер, отдельный шаблон не нужен
Contributor
There was a problem hiding this comment. На мобильном не соответствует макету + логотип надо чуть побольше: 64px хотя бы |
This file contains hidden or 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 @@ | ||
| <% | ||
| const css = { | ||
| navLinkDesktop: "md_Txd-n md_C-$brand_h Ts-$shortTs", | ||
| navLinkMobile: "C-$reAccent900 Txd-n C-$brand_a Pb2u Bdb1;s;$brand md_Bdb-n", | ||
| navLi: "md_Pb0 md_Bd-n md_M10" | ||
| } | ||
| %> | ||
|
|
||
| <header class=" D-f Jc-sb Ai-c P15u;4u;2u md_P0;5.5p Bgc-$core950 Bcf -Blr0.4 Ps-f H-$headerH W100p C-$headerC Zi20"> | ||
|
|
||
|
Contributor
There was a problem hiding this comment. Много пустых строк - не надо так. Пусть будут только между крупными блоками |
||
| <%# Logo %> | ||
| <div class="W40 H16 md_W83 md_H34"> | ||
|
Contributor
There was a problem hiding this comment. Это наоборот делается: указываем размеры изображения, от которых зависит контейнер
Contributor
There was a problem hiding this comment. Ширину логотипа сделать 116, высоту: auto |
||
| <a href="/" id="header-logo" class="D-f Jc-c Ai-c -Sz100p <%= it.cssHeaderLogoVisibility %> Ts-O;$shortTs"> | ||
| <svg class="-Sz100p" alt="mlut logo"> | ||
|
Contributor
There was a problem hiding this comment. Если логотип не перекрашивается, то его лучше просто img делать. И посмотри как сейчас href у лого реализован - надо так же |
||
| <use href="/assets/img/icons.svg#header-logo"></use> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
|
|
||
| <%# Menu %> | ||
| <div class="D-f Fld-r Jc-fe md_D-f md_Jc-e md_Gap8u md_Fns-$headerFns"> | ||
|
|
||
| <%- include('./burger.ejs') %> | ||
|
|
||
| <div class="Bgc-$core950 Ps-a R0 T-$headerH Ts-$longTs Tf -Trx101p Bd1;s;$brand Bdr-n Bdtlr3u Bdblr3u Mxw50u ^burger:c:~_-Trx0 W50vw P10u;0 md_All-ust @:h<420_P3u;0"> | ||
|
Contributor
There was a problem hiding this comment.
Contributor
There was a problem hiding this comment.
|
||
| <nav class="M0;0;9u md_M0"> | ||
| <h2 class="P0;5u M0;0;7u Txa-r C-$brand md_D-n @:h<420_M0;0;4u"> Menu </h2> | ||
| <ul id="nav-menu" class="C-$reAccent900 H40p D-f Jc-c Fld-c Gap6u P0;5u Txa-r Fns4u Lsst-n M0 md_Fld-r md_Jc-sb md_P0 md_H100p md_Gap8u md_Txa-c md_Fns3u @:h<420:w<gMd_Fld-r @:h<420:w<gMd_Flw-w @:h<420:w<gMd_Jc-fe"> | ||
| <% for (let navLink of it.navLinksRedesign) {%> | ||
| <li class=" <%= css.navLi %>"> | ||
| <a href="<%= navLink.link %>" class="<%= css.navLinkMobile %> <%= css.navLinkDesktop %>"> | ||
| <%= navLink.text %> | ||
| </a> | ||
| </li> | ||
| <% }%> | ||
| </ul> | ||
| <script type="module"> | ||
|
|
||
| if(window.location.href.includes('productradar')) { | ||
| const navMenu = document.getElementById('nav-menu'); | ||
| const newItem = navMenu.lastElementChild.cloneNode(true); | ||
| const link = newItem.firstElementChild; | ||
|
|
||
| link.textContent = 'Вебинар'; | ||
| link.href = 'https://forms.gle/GjneTZGWHkeCavev5'; | ||
| link.setAttribute('target', 'blank'); | ||
| link.classList.add('Fnw-b'); | ||
| navMenu.appendChild(newItem); | ||
| } | ||
| </script> | ||
| </nav> | ||
|
|
||
| <%# External links %> | ||
| <div> | ||
| <h2 class="P0;5u Txa-r M0;0;3u C-$brand md_D-n @:h<420_M0;0;4u"> Find us</h2> | ||
| <div class="D-f Fld-r Jc-fe Ai-c Gap3u P0;5u H8u md_D-n"> | ||
| <% for (let extLink of it.extLinksRedesign) {%> | ||
| <%- include('../components/sm-link.ejs',{ | ||
| icon: `${extLink.icon}`, | ||
| link: `${extLink.link}`, | ||
| name: `${extLink.name}` | ||
| }) %> | ||
| <% }%> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <%# Desktop links %> | ||
| <div class="Ai-c Jc-sb P1u;2.5u D-n md_D-f md_Gap8u md_P0"> | ||
| <% for (let extLink of it.extLinksRedesign) { %> | ||
| <%- include('../components/sm-link.ejs',{ | ||
| icon: `${extLink.icon}`, | ||
| link: `${extLink.link}`, | ||
| name: `${extLink.name}` | ||
| }) %> | ||
| <% } %> | ||
| </div> | ||
| </div> | ||
|
|
||
| </header> | ||
This file contains hidden or 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 hidden or 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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.
Uh oh!
There was an error while loading. Please reload this page.