ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-15 01:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix mobile stlying

Browse Source
This commit is contained in:
jonathanlei
2023-08-30 18:54:19 -07:00
parent 88c58ba77d
commit 01875cbbb5
4 changed files with 70 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2022-v23.css
View File

File diff suppressed because one or more lines are too long

72
styles/_top-banner.scss
View File

@@ -146,6 +146,27 @@ html.light .token-banner-container {
}
}
.hide-on-mobile {
@include media-breakpoint-down(sm) {
display: none !important;
}
}
.show-on-mobile {
display: none;
@include media-breakpoint-down(sm) {
display: inline !important;
}
}
@include media-breakpoint-up(md) {
.hide-on-mobile,
.show-on-mobile {
display: inline !important;
}
}
.token-highlight {
color: $apex-2023-green;
@include media-breakpoint-up(sm) {
@@ -207,6 +228,45 @@ html.light .token-banner-container {
margin-right: 10px;
font-size: 14px;
}
.clock-number {
font-variant-numeric: tabular-nums;
}
.js-clock .box {
display: inline-block;
margin-right: 10px;
}
.js-clock .box:last-child {
margin-right: 0;
}
.token-circled,
#js-clock {
@include media-breakpoint-down(sm) {
display: none;
}
}
@include media-breakpoint-up(md) {
.token-reg,
.token-circled,
#js-clock {
display: inline-block;
margin-top: 10px;
}
}
@include media-breakpoint-down(sm) {
.show-on-mobile {
display: inline-block;
}
.highlight-yellow{
margin-top:10px;
}
.token-highlight{
margin-right:10px;
}
}
}
/* old "pencil banner" style, currently unused */
@@ -314,15 +374,3 @@ html.light {
}
}
}
.clock-number {
font-variant-numeric: tabular-nums;
}
.js-clock .box {
display: inline-block;
margin-right: 10px;
}
.js-clock .box:last-child {
margin-right: 0;
}

6
styles/package.json
View File

@@ -4,9 +4,9 @@
"node-sass": "^7.0.0"
},
"scripts": {
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v21.css --output-style compressed",
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v21.css --output-style compressed --source-map true",
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v21.css --output-style compressed --source-map true"
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v23.css --output-style compressed",
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v23.css --output-style compressed --source-map true",
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v23.css --output-style compressed --source-map true"
},
"dependencies": {
"sass": "^1.26.10"

10
template/component-top-nav.html.jinja
View File

@@ -15,7 +15,7 @@
// Define the banner HTML with the countdown timer
let token2049bannerHTML = `
<a href="https://www.token2049.com/" target="_blank" class="w-inline-block token-banner-container d-flex justify-content-center">
<div id="js-clock" class="js-clock d-flex align-items-center">
<div id="js-clock" class="js-clock align-items-center">
<div class="box">
<div id="js-clock-days" class="clock-number">00</div>
<div class="clock-label">Days</div>
@@ -33,9 +33,11 @@
<div class="clock-label">Sec</div>
</div>
</div>
<div class="token-reg">{% trans %}Countdown to XRPL Zone<span class="token-highlight"> @Token2049</span>{% endtrans %}</div>
<div class="token-circled d-lg-block highlight-yellow">{% trans %} Singapore{% endtrans %}</div>
<div class="token-reg"> {% trans %} 12 September 2023 {% endtrans %} </div>
<div class="token-reg"> <span class="hide-on-mobile">{% trans %}Countdown to{% endtrans %}</span>
<span class="show-on-mobile">{% trans %}XRPL Zone {% endtrans %}</span>
<span class="token-highlight show-on-mobile">{% trans %}@Token2049{% endtrans %}</span></div>
<div class="token-circled d-lg-block highlight-yellow show-on-mobile">{% trans %} Singapore{% endtrans %}</div>
<div class="token-reg hide-on-mobile"> {% trans %} 12 September 2023 {% endtrans %} </div>
<div class="token-circled d-none d-lg-block highlight-purple">{% trans %}Register Now{% endtrans %}</div>
</a>
`;