feat: align React online-board start page styling with Angular version
- Updated feature card grid from CSS Grid to Flexbox (2x2 layout with 50% width) - Added background image and title icon SVGs for visual parity - Changed card title colors from dark gray to blue (#0066cc) matching Angular links - Fixed padding and spacing to match Angular (50px sections, 65px icon offset) - Added data-testid attributes for E2E testing - Created comprehensive visual design alignment report documenting changes
This commit is contained in:
gnezim
@@ -5,21 +5,38 @@
|
||||
.online-board-start-page__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.online-board-start-page__welcome {
|
||||
h2 {
|
||||
padding: 50px;
|
||||
padding-bottom: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.online-board-start-page__tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 20px !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.online-board-start-page__tile {
|
||||
padding: 20px;
|
||||
width: 50%;
|
||||
padding: 30px;
|
||||
padding-right: 50px;
|
||||
padding-left: 65px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@@ -29,9 +46,9 @@
|
||||
|
||||
h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #0066cc;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -40,6 +57,33 @@
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&[data-testid="tile-actual-info"] {
|
||||
background-image: url('/assets/img/title-icon-1.svg');
|
||||
}
|
||||
|
||||
&[data-testid="tile-services"] {
|
||||
background-image: url('/assets/img/title-icon-2.svg');
|
||||
}
|
||||
|
||||
&[data-testid="tile-book-ticket"] {
|
||||
background-image: url('/assets/img/title-icon-3.svg');
|
||||
}
|
||||
|
||||
&[data-testid="tile-schedule"] {
|
||||
background-image: url('/assets/img/title-icon-4.svg');
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100% !important;
|
||||
padding: 20px !important;
|
||||
padding-left: 50px !important;
|
||||
background-size: 35px auto !important;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.online-board-start-page__popular {
|
||||
@@ -58,3 +102,35 @@
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.online-board-start-page__title {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.online-board-start-page__breadcrumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.online-board-start-page__routes {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.online-board-start-page__route-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.online-board-start-page__route-label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.online-board-start-page__route-link {
|
||||
color: #0066cc;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="47.263" height="45" viewBox="0 0 47.263 45">
|
||||
<g id="title-icon-1" transform="translate(-1 -3)">
|
||||
<path id="Path_560" data-name="Path 560" d="M44.424,12.933H38.291v1.945h6.133a2.046,2.046,0,0,1,1.945,2.1V43.95a2.047,2.047,0,0,1-1.945,2.1H4.837a2.046,2.046,0,0,1-1.945-2.1V16.93a2.047,2.047,0,0,1,1.945-2.1v.052h6.514V12.933H4.837A3.976,3.976,0,0,0,1,16.982v26.97A3.976,3.976,0,0,0,4.837,48H44.476a3.9,3.9,0,0,0,3.785-4.048V16.982A3.975,3.975,0,0,0,44.424,12.933Z" fill="#4990e2"/>
|
||||
<path id="Path_561" data-name="Path 561" d="M28.165,37.9a1.221,1.221,0,1,0,1.221,1.221A1.221,1.221,0,0,0,28.165,37.9Z" fill="#4990e2"/>
|
||||
<path id="Path_562" data-name="Path 562" d="M40.213,37.9H32.551a1.221,1.221,0,1,0,0,2.442h7.662a1.221,1.221,0,0,0,0-2.442Z" fill="#4990e2"/>
|
||||
<path id="Path_563" data-name="Path 563" d="M28.165,32.638a1.221,1.221,0,1,0,1.221,1.221A1.221,1.221,0,0,0,28.165,32.638Z" fill="#4990e2"/>
|
||||
<path id="Path_564" data-name="Path 564" d="M40.213,32.638H32.551a1.221,1.221,0,1,0,0,2.442h7.662a1.221,1.221,0,1,0,0-2.442Z" fill="#4990e2"/>
|
||||
<path id="Path_565" data-name="Path 565" d="M28.165,27.382A1.221,1.221,0,1,0,29.386,28.6,1.221,1.221,0,0,0,28.165,27.382Z" fill="#4990e2"/>
|
||||
<path id="Path_566" data-name="Path 566" d="M40.213,27.382H32.551a1.221,1.221,0,1,0,0,2.442h7.662a1.221,1.221,0,1,0,0-2.442Z" fill="#4990e2"/>
|
||||
<path id="Path_567" data-name="Path 567" d="M8.713,37.9a1.221,1.221,0,1,0,1.221,1.221A1.221,1.221,0,0,0,8.713,37.9Z" fill="#4990e2"/>
|
||||
<path id="Path_568" data-name="Path 568" d="M13.1,40.339h7.662a1.221,1.221,0,1,0,0-2.442H13.1a1.221,1.221,0,1,0,0,2.442Z" fill="#4990e2"/>
|
||||
<path id="Path_569" data-name="Path 569" d="M8.713,32.638a1.221,1.221,0,1,0,1.221,1.221A1.221,1.221,0,0,0,8.713,32.638Z" fill="#4990e2"/>
|
||||
<path id="Path_570" data-name="Path 570" d="M13.1,35.082h7.662a1.221,1.221,0,1,0,0-2.442H13.1a1.221,1.221,0,1,0,0,2.442Z" fill="#4990e2"/>
|
||||
<path id="Path_571" data-name="Path 571" d="M8.713,27.382A1.221,1.221,0,1,0,9.934,28.6,1.221,1.221,0,0,0,8.713,27.382Z" fill="#4990e2"/>
|
||||
<path id="Path_572" data-name="Path 572" d="M13.1,29.825h7.662a1.221,1.221,0,1,0,0-2.442H13.1a1.221,1.221,0,1,0,0,2.442Z" fill="#4990e2"/>
|
||||
<path id="Path_573" data-name="Path 573" d="M11.989,8.984l.365.722.729,1.447.729,1.447.365.722a.676.676,0,0,1,.006.741c-.486.967-.97,1.937-1.456,2.9L12,18.415l-.1.175-.017.029.018.01h.1a2.512,2.512,0,0,0,.379-.02,1.274,1.274,0,0,0,.689-.342c.092-.084.406-.473.483-.569l.472-.576c.318-.383.635-.771.95-1.155l.472-.576a.856.856,0,0,1,.287-.248.831.831,0,0,1,.373-.07l1.557.01,3.15-.005.782,0h.347l-.011.02-.158.355c-.212.483-.415.945-.622,1.419q-1.246,2.841-2.488,5.675c-.214.478-.415.945-.623,1.414l-.158.355-.024.041.018.01h.3a2.532,2.532,0,0,0,.777-.06,1.352,1.352,0,0,0,.645-.441c.081-.1.158-.206.23-.313s.16-.2.225-.315c.314-.436.608-.845.912-1.264q1.83-2.539,3.625-5.052c.307-.425.6-.837.9-1.252a3.856,3.856,0,0,0,.225-.315.7.7,0,0,1,.3-.242,1.027,1.027,0,0,1,.382-.053h4.3c.261,0,.52.006.781,0a6.7,6.7,0,0,0,1.548-.225,7.767,7.767,0,0,0,1.46-.549l.722-.326a.338.338,0,0,0,0-.617c-.239-.107-1.2-.542-1.458-.636a6.8,6.8,0,0,0-1.512-.387,11.545,11.545,0,0,0-1.556-.06l-1.568.031H26.366A.927.927,0,0,1,26,12.248.706.706,0,0,1,25.7,12l-.214-.307-.451-.627-.909-1.25L20.472,4.77l-.458-.635-.229-.315c-.078-.1-.146-.214-.23-.313a1.359,1.359,0,0,0-.646-.439,2.544,2.544,0,0,0-.778-.059h-.293L17.826,3l.022.043L18,3.4l.314.688L18.942,5.5l2.53,5.718.314.708.155.355c.014.017.022.043,0,.033H21.6l-1.564.005-3.131.013-.78,0a.82.82,0,0,1-.374-.07.87.87,0,0,1-.285-.251l-.946-1.151-.951-1.15c-.078-.1-.393-.485-.485-.569A1.272,1.272,0,0,0,12.4,8.8a2.367,2.367,0,0,0-.379-.019h-.094l-.048,0,.02.011Z" fill="#4990e2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42">
|
||||
<g id="title-icon-2" transform="translate(-4 -4)">
|
||||
<path id="Path_574" data-name="Path 574" d="M45,25A20,20,0,1,1,25,5,20,20,0,0,1,45,25Z" fill="none" stroke="#4a90e2" stroke-width="2"/>
|
||||
<path id="Path_575" data-name="Path 575" d="M25,22a2,2,0,0,0-2,2V34a2,2,0,0,0,2,2h0a2,2,0,0,0,2-2V24a2,2,0,0,0-2-2Z" fill="none" stroke="#4a90e2" stroke-width="2" fill-rule="evenodd"/>
|
||||
<path id="Path_576" data-name="Path 576" d="M25,19a2,2,0,1,0-2-2A2,2,0,0,0,25,19Z" fill="none" stroke="#4a90e2" stroke-width="2" fill-rule="evenodd"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 635 B |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="44.127" height="44.84" viewBox="0 0 44.127 44.84">
|
||||
<g id="title-icon-3" transform="translate(-2.944 -2.08)">
|
||||
<path id="Path_555" data-name="Path 555" d="M4.092,31.9,30.23,3.08l4.68,4.2a4.191,4.191,0,0,0,.521,5.7,4.239,4.239,0,0,0,5.747-.084l4.731,4.254L19.718,45.92ZM46.071,17.3h0Zm-.015-.309h0ZM3.944,32.058h0Z" fill="none" stroke="#4a90e2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
|
||||
<path id="Path_556" data-name="Path 556" d="M36,21l2,2" fill="none" stroke="#4a90e2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
|
||||
<path id="Path_557" data-name="Path 557" d="M30,15l4,4" fill="none" stroke="#4a90e2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
|
||||
<path id="Path_558" data-name="Path 558" d="M25,10l3,3" fill="none" stroke="#4a90e2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
|
||||
<path id="Path_559" data-name="Path 559" d="M26.338,22.288l-2.3,2.293-7.124-.809-.863.861,6.322,1.628-2.727,3.245L16.9,29.1l-.9.894,3.126.858L19.958,34l.9-.9-.39-2.776,3.258-2.716,1.633,6.307.863-.861-.811-7.105,2.3-2.293a.969.969,0,1,0-1.372-1.368Z" fill="#4a90e2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="42.01" height="42.005" viewBox="0 0 42.01 42.005">
|
||||
<g id="title-icon-4" transform="translate(-3.355 -3.351)">
|
||||
<path id="Path_577" data-name="Path 577" d="M20.191,43.911A20,20,0,1,1,44.2,21.758" transform="translate(0)" fill="none" stroke="#4a90e2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<path id="Path_578" data-name="Path 578" d="M15.624,67.541a2.666,2.666,0,0,0,2.586-3.314l-1.333-5.333a2.666,2.666,0,0,0-2.586-2.019H4.775A19.991,19.991,0,0,0,11.914,76.5l1.792-8.963Z" transform="translate(-0.005 -36.518)" fill="none" stroke="#4a90e2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<path id="Path_579" data-name="Path 579" d="M98.139,30.625H90.915a2.666,2.666,0,0,0-2.586,2.019l-.828,3.3" transform="translate(-57.8 -18.267)" fill="none" stroke="#4a90e2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<path id="Path_580" data-name="Path 580" d="M65.625,76.291A10.666,10.666,0,1,0,76.291,65.625,10.666,10.666,0,0,0,65.625,76.291Z" transform="translate(-42.591 -42.601)" fill="none" stroke="#4a90e2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<path id="Path_581" data-name="Path 581" d="M105.339,89.869h-4.714V85.155" transform="translate(-66.925 -56.18)" fill="none" stroke="#4a90e2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user