nathanwoodburn/shakecities
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: More responsive display
All checks were successful
Build Docker / Build SLDs Image (push) Successful in 19s
Details
Build Docker / Build Main Image (push) Successful in 20s
Details

Browse Source
This commit is contained in:
Nathan Woodburn 2023-11-15 19:15:10 +11:00
parent 05a67dcb2b
commit 10d3df6460
Signed by: nathanwoodburn
GPG Key ID: 203B000478AD0EF1
2 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/assets/css/styles.min.css vendored
View File

@ -1 +1 @@
.bs-icon{--bs-icon-size:.75rem;display:flex;flex-shrink:0;justify-content:center;align-items:center;font-size:var(--bs-icon-size);width:calc(var(--bs-icon-size) * 2);height:calc(var(--bs-icon-size) * 2);color:var(--bs-primary)}.bs-icon-xs{--bs-icon-size:1rem;width:calc(var(--bs-icon-size) * 1.5);height:calc(var(--bs-icon-size) * 1.5)}.bs-icon-sm{--bs-icon-size:1rem}.bs-icon-md{--bs-icon-size:1.5rem}.bs-icon-lg{--bs-icon-size:2rem}.bs-icon-xl{--bs-icon-size:2.5rem}.bs-icon.bs-icon-primary{color:var(--bs-white);background:var(--bs-primary)}.bs-icon.bs-icon-primary-light{color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.2)}.bs-icon.bs-icon-semi-white{color:var(--bs-primary);background:rgba(255,255,255,.5)}.bs-icon.bs-icon-rounded{border-radius:.5rem}.bs-icon.bs-icon-circle{border-radius:50%}.right-align{right:1%}.top-align{top:0;margin-top:1%}.sticky-bottom{width:100%;bottom:1%;left:0} .bs-icon{--bs-icon-size:.75rem;display:flex;flex-shrink:0;justify-content:center;align-items:center;font-size:var(--bs-icon-size);width:calc(var(--bs-icon-size) * 2);height:calc(var(--bs-icon-size) * 2);color:var(--bs-primary)}.bs-icon-xs{--bs-icon-size:1rem;width:calc(var(--bs-icon-size) * 1.5);height:calc(var(--bs-icon-size) * 1.5)}.bs-icon-sm{--bs-icon-size:1rem}.bs-icon-md{--bs-icon-size:1.5rem}.bs-icon-lg{--bs-icon-size:2rem}.bs-icon-xl{--bs-icon-size:2.5rem}.bs-icon.bs-icon-primary{color:var(--bs-white);background:var(--bs-primary)}.bs-icon.bs-icon-primary-light{color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.2)}.bs-icon.bs-icon-semi-white{color:var(--bs-primary);background:rgba(255,255,255,.5)}.bs-icon.bs-icon-rounded{border-radius:.5rem}.bs-icon.bs-icon-circle{border-radius:50%}.right-align{right:0;margin-right:1%}.top-align{top:0;margin-top:1%}.sticky-bottom{width:100%;bottom:1%;left:0}

51
templates/city.html
View File

@ -17,10 +17,36 @@
</head> </head>
<body style="height: 99vh;width: 100vw;color: #1fffff;background: #000000;overflow-x: hidden;"> <body style="height: 99vh;width: 100vw;color: #1fffff;background: #000000;overflow-x: hidden;">
<div> <div class="d-print-block d-sm-none d-md-none d-lg-none d-xl-block d-xxl-block">
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;width: 40%;display: inline-flex;height: 15em;margin-top: 1%;margin-left: 1%;"> <div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;width: 30%;display: inline-flex;height: 15em;margin-top: 1%;margin-left: 1%;">
<div style="width: 20vw;height: 20vw;max-width: 200px;max-height: 200px;display: inline-block;"><img src="{{avatar}}" width="100%" height="100%" style="border-radius: 50%;"></div> <div style="width: 20vw;height: 20vw;max-height: 200px;max-width: 200px;"><img src="{{avatar}}" width="100%" height="100%" style="border-radius: 50%;"></div>
<div style="display: inline-block;margin-left: 40px;"> <div style="margin-left: 40px;">
<div>
<p style="font-size: 24px;">{{hnschat}}</p>
</div>
<div>
<p style="font-size: 24px;">{{location}}</p>
</div>
</div>
</div>
<div class="d-xl-flex align-items-xl-center right-align top-align" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-bottom: 2%;width: 60%;position: absolute;padding-right: 2%;display: inline-flex;height: 15em;">
<div style="display: inline-block;">
<div>
<p style="font-size: 24px;">HNS: {{hns}}</p>
</div>
<div>
<p style="font-size: 24px;">BTC: {{btc}}</p>
</div>
<div>
<p style="font-size: 24px;">ETH: {{eth}}</p>
</div>
</div>
</div>
</div>
<div class="d-print-none d-sm-none d-md-none d-lg-block d-xl-none d-xxl-none">
<div style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;width: 40%;margin-top: 1%;margin-left: 1%;">
<div style="width: 100%;height: 20vw;max-height: 200px;"><img src="{{avatar}}" width="100%" height="100%" style="border-radius: 50%;"></div>
<div class="text-center">
<div> <div>
<p style="font-size: 24px;">{{hnschat}}</p> <p style="font-size: 24px;">{{hnschat}}</p>
</div> </div>
@ -42,7 +68,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="d-xl-flex align-items-xl-center right-align top-align" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-bottom: 2%;width: 50%;position: absolute;padding-right: 2%;display: inline-flex;height: 15em;"> </div>
<div class="d-none d-print-none d-sm-block d-md-block d-lg-none d-xl-none d-xxl-none">
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;display: inline-flex;margin: 1%;width: 98%;">
<div style="width: 20vw;height: 20vw;max-width: 200px;max-height: 200px;display: inline-block;"><img src="{{avatar}}" width="100%" height="100%" style="border-radius: 50%;"></div>
<div style="display: inline-block;margin-left: 40px;">
<div>
<p style="font-size: 24px;">{{hnschat}}</p>
</div>
<div>
<p style="font-size: 24px;">{{location}}</p>
</div>
</div>
</div>
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-bottom: 2%;padding-right: 2%;display: inline-flex;margin: 1%;width: 98%;">
<div style="display: inline-block;"> <div style="display: inline-block;">
<div> <div>
<p style="font-size: 24px;">HNS: {{hns}}</p> <p style="font-size: 24px;">HNS: {{hns}}</p>
@ -56,7 +95,7 @@
</div> </div>
</div> </div>
</div> </div>
<div style="width: 98%;margin: auto;background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;margin-top: 1%;margin-bottom: 1%;"> <div style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;margin: 1%;margin-right: 1.6%;">
<p style="font-size: 24px;">{{data|safe}}</p> <p style="font-size: 24px;">{{data|safe}}</p>
</div> </div>
<div class="d-flex justify-content-xl-start align-items-xl-center" style="margin-right: 1%;margin-left: 1%;height: 6%;margin-top: 0.5%;"> <div class="d-flex justify-content-xl-start align-items-xl-center" style="margin-right: 1%;margin-left: 1%;height: 6%;margin-top: 0.5%;">