Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Update responsive styles and class names for consistency

Browse Source 
Refactored multiple components to improve responsive design, ensuring better usability on smaller screens. Standardized class names for clarity and consistency, and adjusted layouts and styles to enhance overall alignment and accessibility.
This commit is contained in:
Peter
2025-07-14 22:49:22 +02:00
parent 974d50d7cd
commit 5a792463cc
24 changed files with 190 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/pages/features/warps/warps.component.html
+5 -9
View File
@@ -19,10 +19,8 @@
name, description, and icon) on their own! This lets you easily promote your town, shop, farm, or just
about anything else.</p>
<p>All warps are separated into categories so it's easy to find the category of warp you're looking for.</p>
<img ngSrc="/public/img/random/warpgui.png"
alt="In-game warp GUI"
style="width: 80%; padding-bottom: 15px;"
height="232" width="356">
<img ngSrc="/public/img/random/warpgui.png" alt="In-game warp GUI"
class="guiWarp" style="width: 80%; padding-bottom: 15px;" height="232" width="356">
</div>
</div>
<div class="columnContainer">
@@ -45,7 +43,7 @@
</div>
</section>
<section class="columnSection" style="padding-top: 0;">
<div class="columnParagraph" style="padding-left: 15px;">
<div class="columnParagraph" style="padding-left: 15px; text-align: center;">
<h2>Warp Requirements</h2>
<p>You need to be the owner of the claim your warp is placed in. It should look good, and be as finished as
your warp type allows you to have it. Safety is an important aspect as well, visitors should not be
@@ -207,10 +205,8 @@
warp, just do <span style="font-family: 'opensans-bold', sans-serif;">/warps</span> and click on the chest
labeled "<span style="font-family: 'opensans-bold', sans-serif;">My Warps</span>" in the bottom left
corner.</p>
<img ngSrc="/public/img/random/editwarpgui.png"
alt="In-game warp edit GUI"
style="width: 80%;"
width="384" height="170">
<img ngSrc="/public/img/random/editwarpgui.png" alt="In-game warp edit GUI"
class="editWarp" style="width: 80%;" width="384" height="170">
<p>Maintaining a warp also involves making sure it looks nice, shops are well stocked, and, if it's a town,
open plots are always available for residents to move in. Make sure you keep up on maintaining your warp
or it could be deleted! If a warp is deleted by a staff member you will not receive a refund for the
frontend/src/app/pages/features/warps/warps.component.scss
+10
View File
@@ -12,3 +12,13 @@ main li {
color: var(--font-color);
transition: 0.5s ease;
}
@media (max-width: 690px) {
.guiWarp {
height: 190px;
}
.editWarp {
height: 130px;
}
}