From 5a792463ccc93cd52e63708bc8b6a03d84d3eeae Mon Sep 17 00:00:00 2001 From: Peter <42907716+MrShack@users.noreply.github.com> Date: Mon, 14 Jul 2025 22:49:22 +0200 Subject: [PATCH] Update responsive styles and class names for consistency 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. --- .../features/claiming/claiming.component.html | 4 +- .../features/claiming/claiming.component.scss | 7 ++++ .../customfeatures.component.html | 3 +- .../customfeatures.component.scss | 6 +++ .../features/economy/economy.component.html | 2 +- .../features/economy/economy.component.scss | 16 ++++++++ .../app/pages/features/map/map.component.scss | 10 +++++ .../pages/features/mypet/mypet.component.html | 4 +- .../pages/features/mypet/mypet.component.scss | 6 +++ .../pages/features/warps/warps.component.html | 14 +++---- .../pages/features/warps/warps.component.scss | 10 +++++ .../pages/footer/footer/footer.component.html | 2 +- .../pages/footer/footer/footer.component.scss | 37 +++++++++++++++++++ .../src/app/pages/home/home.component.html | 4 +- .../src/app/pages/home/home.component.scss | 10 ++--- .../pages/reference/lag/lag.component.html | 2 +- .../pages/reference/lag/lag.component.scss | 11 ++++++ .../reference/mapart/mapart.component.html | 12 ++++-- .../reference/mapart/mapart.component.scss | 13 +++++++ .../nicknames/nicknames.component.html | 11 ++++-- .../nicknames/nicknames.component.scss | 9 +++++ .../reference/rules/rules.component.html | 2 +- .../reference/rules/rules.component.scss | 8 ++-- frontend/src/styles.scss | 29 ++++++++++++++- 24 files changed, 190 insertions(+), 42 deletions(-) diff --git a/frontend/src/app/pages/features/claiming/claiming.component.html b/frontend/src/app/pages/features/claiming/claiming.component.html index 9ac84ea..e31c4b8 100644 --- a/frontend/src/app/pages/features/claiming/claiming.component.html +++ b/frontend/src/app/pages/features/claiming/claiming.component.html @@ -19,8 +19,8 @@

To claim land, you will need some basic tools: a golden shovel, and a stick. You can craft these items yourself or do /claim to receive them for free. The shovel is used for modifying claims and the stick is used for viewing claim information.

- Minecraft golden shovel + Minecraft golden shovel

Players start with an allowance of 500 “claim blocks” and can purchase additional “claim blocks” with in-game currency using /buyclaimblocks. How many claims you can create depends on the rank you have - the amount can be found on the

Miscellaneous

Grindstones can strip shulker box & beehive NBT data

-

Sneak click mending

/iwanttobreakthisblock, required to break some natural generated blocks

/sneakclickmending, allows you to mend your items by right clicking while sneaking

Swift Sneak enchantment can be found in villager trades

Nether portals can be as small as 1x2 (1x2 portal, 3x4 base)

Lootchests refill once for every player

Empty maps can be duplicated using paper in a cartography table

-

Eating glowberries gives you a glowing effect

+

Eating glow berries gives you a glowing effect

diff --git a/frontend/src/app/pages/features/customfeatures/customfeatures.component.scss b/frontend/src/app/pages/features/customfeatures/customfeatures.component.scss index 14748f5..ebe136e 100644 --- a/frontend/src/app/pages/features/customfeatures/customfeatures.component.scss +++ b/frontend/src/app/pages/features/customfeatures/customfeatures.component.scss @@ -7,3 +7,9 @@ main li { margin-left: 30px; padding-bottom: 10px; } + +@media (max-width: 690px) { + .columnContainer { + text-align: left !important; + } +} diff --git a/frontend/src/app/pages/features/economy/economy.component.html b/frontend/src/app/pages/features/economy/economy.component.html index e8aaf07..59eef19 100644 --- a/frontend/src/app/pages/features/economy/economy.component.html +++ b/frontend/src/app/pages/features/economy/economy.component.html @@ -104,7 +104,7 @@ prices will become more and more extreme. You can see where these thresholds are based on your current points here:

Visualization of the point bracket.
diff --git a/frontend/src/app/pages/features/economy/economy.component.scss b/frontend/src/app/pages/features/economy/economy.component.scss index 14748f5..b93dc83 100644 --- a/frontend/src/app/pages/features/economy/economy.component.scss +++ b/frontend/src/app/pages/features/economy/economy.component.scss @@ -7,3 +7,19 @@ main li { margin-left: 30px; padding-bottom: 10px; } + +@media (max-width: 690px) { + .title { + height: calc(100% - 110px); + margin-top: 100px; + } + + .title h2 { + font-size: 0.9em; + } + + .visEconomy { + height: 50px; + width: 357px; + } +} diff --git a/frontend/src/app/pages/features/map/map.component.scss b/frontend/src/app/pages/features/map/map.component.scss index d47a853..96f0064 100644 --- a/frontend/src/app/pages/features/map/map.component.scss +++ b/frontend/src/app/pages/features/map/map.component.scss @@ -11,3 +11,13 @@ padding-bottom: 25px; font-weight: 100; } + +@media (max-width: 670px) { + .title h1 { + font-size: 2em; + } + + .title h2 { + font-size: 1em; + } +} diff --git a/frontend/src/app/pages/features/mypet/mypet.component.html b/frontend/src/app/pages/features/mypet/mypet.component.html index c3c9783..cb952dc 100644 --- a/frontend/src/app/pages/features/mypet/mypet.component.html +++ b/frontend/src/app/pages/features/mypet/mypet.component.html @@ -24,8 +24,8 @@ your other pets while they are in storage. To interact with your MyPet you will need to make it your active MyPet by doing /petswitch and selecting the one you want to use.

- Minecraft lead/leash + Minecraft lead/leash

Skilltrees and Levels

diff --git a/frontend/src/app/pages/features/mypet/mypet.component.scss b/frontend/src/app/pages/features/mypet/mypet.component.scss index 11288bc..6b635bf 100644 --- a/frontend/src/app/pages/features/mypet/mypet.component.scss +++ b/frontend/src/app/pages/features/mypet/mypet.component.scss @@ -13,3 +13,9 @@ main li { justify-content: space-between; flex-wrap: wrap; } + +@media (max-width: 690px) { + .leadMyPet { + height: 70px; + } +} diff --git a/frontend/src/app/pages/features/warps/warps.component.html b/frontend/src/app/pages/features/warps/warps.component.html index 8c7b153..486cf6f 100644 --- a/frontend/src/app/pages/features/warps/warps.component.html +++ b/frontend/src/app/pages/features/warps/warps.component.html @@ -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.

All warps are separated into categories so it's easy to find the category of warp you're looking for.

- In-game warp GUI + In-game warp GUI
@@ -45,7 +43,7 @@
-
+

Warp Requirements

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 /warps and click on the chest labeled "My Warps" in the bottom left corner.

- In-game warp edit GUI + In-game warp edit GUI

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 diff --git a/frontend/src/app/pages/features/warps/warps.component.scss b/frontend/src/app/pages/features/warps/warps.component.scss index 0d31102..86e5ea3 100644 --- a/frontend/src/app/pages/features/warps/warps.component.scss +++ b/frontend/src/app/pages/features/warps/warps.component.scss @@ -12,3 +12,13 @@ main li { color: var(--font-color); transition: 0.5s ease; } + +@media (max-width: 690px) { + .guiWarp { + height: 190px; + } + + .editWarp { + height: 130px; + } +} diff --git a/frontend/src/app/pages/footer/footer/footer.component.html b/frontend/src/app/pages/footer/footer/footer.component.html index 9dc4bbf..c5a4a6b 100644 --- a/frontend/src/app/pages/footer/footer/footer.component.html +++ b/frontend/src/app/pages/footer/footer/footer.component.html @@ -3,7 +3,7 @@

ABOUT US

-

​Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come +

Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come to call "home". We are your place to get together with friends and play survival, with a few extra features suggested by our community!

diff --git a/frontend/src/app/pages/footer/footer/footer.component.scss b/frontend/src/app/pages/footer/footer/footer.component.scss index f636201..7f278b4 100644 --- a/frontend/src/app/pages/footer/footer/footer.component.scss +++ b/frontend/src/app/pages/footer/footer/footer.component.scss @@ -67,3 +67,40 @@ footer ul, footer p { .copyright { margin-top: 50px; } + +@media (max-width: 1150px) { + .footerInner { + flex-wrap: wrap; + text-align: center; + } + + .footerText { + flex: 1 1 100%; + margin-right: 0; + margin-bottom: 30px; + } + + .footerNav { + border-left: none; + padding-left: 0px; + padding-bottom: 15px; + min-width: 200px; + } + + .followUs { + width: 100px; + margin: 0 auto; + } + + .footerNav { + border-left: none; + padding-left: 0px; + padding-bottom: 15px; + min-width: 200px; + } + + .copyright { + margin-top: 30px; + text-align: center; + } +} diff --git a/frontend/src/app/pages/home/home.component.html b/frontend/src/app/pages/home/home.component.html index 09d1457..5d1e7ac 100644 --- a/frontend/src/app/pages/home/home.component.html +++ b/frontend/src/app/pages/home/home.component.html @@ -50,7 +50,7 @@
-
+

Meet the Community

Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude is your place to get together with friends and relax - and maybe enjoy some survival too. Altitude is @@ -106,7 +106,7 @@

-
+

Community Builds

Thank you to our brilliant players for sharing diff --git a/frontend/src/app/pages/home/home.component.scss b/frontend/src/app/pages/home/home.component.scss index 17525dd..6922277 100644 --- a/frontend/src/app/pages/home/home.component.scss +++ b/frontend/src/app/pages/home/home.component.scss @@ -287,27 +287,23 @@ main .container { .container, .customContainer { width: 90%; } - - #header-img { - width: 45%; - } } @media (max-width: 900px) { - .removemobile { + .remove-mobile { display: none; } } @media (max-width: 690px) { - #discordwidget { + #discord-widget { margin: 0 auto; width: 60%; max-width: 380px; height: 400px; } - #discordp { + #discord-p { margin: 50px auto; } diff --git a/frontend/src/app/pages/reference/lag/lag.component.html b/frontend/src/app/pages/reference/lag/lag.component.html index 2d04323..dfdf13b 100644 --- a/frontend/src/app/pages/reference/lag/lag.component.html +++ b/frontend/src/app/pages/reference/lag/lag.component.html @@ -50,7 +50,7 @@

Visualization of the farm limiter + class="visLagLimiter" style="width: 70%; padding-top: 7px;" height="375" width="715">
  • Turtles only need one breeding pair. The breeding mechanic of turtles allows you to breed one pair over diff --git a/frontend/src/app/pages/reference/lag/lag.component.scss b/frontend/src/app/pages/reference/lag/lag.component.scss index 1ba7b00..c300c58 100644 --- a/frontend/src/app/pages/reference/lag/lag.component.scss +++ b/frontend/src/app/pages/reference/lag/lag.component.scss @@ -53,3 +53,14 @@ li { text-align: center; } } + +@media (max-width: 690px) { + .full-page-list { + text-align: left; + margin-left: 20px; + } + + .visLagLimiter { + height: 150px; + } +} diff --git a/frontend/src/app/pages/reference/mapart/mapart.component.html b/frontend/src/app/pages/reference/mapart/mapart.component.html index badd8e4..0007da9 100644 --- a/frontend/src/app/pages/reference/mapart/mapart.component.html +++ b/frontend/src/app/pages/reference/mapart/mapart.component.html @@ -61,10 +61,14 @@

    Useful Commands

      -
    • /mapart save - Save a mapart
    • -
    • /mapart remove - Delete a mapart
    • -
    • /mapart find - See who made a specific - mapart +
    • + /mapart save - Save a mapart +
    • +
    • + /mapart remove - Delete a mapart +
    • +
    • + /mapart find - See who made a specific mapart
    diff --git a/frontend/src/app/pages/reference/mapart/mapart.component.scss b/frontend/src/app/pages/reference/mapart/mapart.component.scss index e69de29..2c486f4 100644 --- a/frontend/src/app/pages/reference/mapart/mapart.component.scss +++ b/frontend/src/app/pages/reference/mapart/mapart.component.scss @@ -0,0 +1,13 @@ +main ul { + font-family: 'opensans', sans-serif; + text-align: left; +} + +main li { + margin-left: 30px; + padding-bottom: 10px; +} + +.usefulBold { + font-family: 'opensans-bold', sans-serif; +} diff --git a/frontend/src/app/pages/reference/nicknames/nicknames.component.html b/frontend/src/app/pages/reference/nicknames/nicknames.component.html index 2001a12..0a44227 100644 --- a/frontend/src/app/pages/reference/nicknames/nicknames.component.html +++ b/frontend/src/app/pages/reference/nicknames/nicknames.component.html @@ -29,7 +29,7 @@ color options. These colors will be in the form of #XXXXXX; write down the colors that you like so that you can easily use them later.

    - RGB colors

    Output of /colorsextra

    Furthermore, you can also use the nickname generation tool to @@ -64,13 +64,16 @@

    Useful Commands

      -
    • /nick help - Shows a list of all useful +
    • + /nick help - Shows a list of all useful nickname commands and how to use them.
    • -
    • /nick try name - Allows players to see +
    • + /nick try name - Allows players to see how a nickname would look as many times as you like.
    • -
    • /nick request name - Allows players to +
    • + /nick request name - Allows players to submit a new nickname to staff for approval. This function can only be used once per day.
    diff --git a/frontend/src/app/pages/reference/nicknames/nicknames.component.scss b/frontend/src/app/pages/reference/nicknames/nicknames.component.scss index e69de29..67f39e3 100644 --- a/frontend/src/app/pages/reference/nicknames/nicknames.component.scss +++ b/frontend/src/app/pages/reference/nicknames/nicknames.component.scss @@ -0,0 +1,9 @@ +main ul { + font-family: 'opensans', sans-serif; + text-align: left; +} + +main li { + margin-left: 30px; + padding-bottom: 10px; +} diff --git a/frontend/src/app/pages/reference/rules/rules.component.html b/frontend/src/app/pages/reference/rules/rules.component.html index c2be0a1..3e40e65 100644 --- a/frontend/src/app/pages/reference/rules/rules.component.html +++ b/frontend/src/app/pages/reference/rules/rules.component.html @@ -164,7 +164,7 @@ glitches). Exploiting any non-vanilla features (our plugins) is prohibited. Additionally, tools that bypass our AFK system are not allowed. You may use any mods that fit into the categories below.

    We allow modifications in the following categories:

    -
      +
      • Mods that improve client performance (Optifine)
      • Minimaps, as long as it doesn't show anything you can't normally see (caves, dungeon locations, etc.)
      • diff --git a/frontend/src/app/pages/reference/rules/rules.component.scss b/frontend/src/app/pages/reference/rules/rules.component.scss index 39a45de..418e94d 100644 --- a/frontend/src/app/pages/reference/rules/rules.component.scss +++ b/frontend/src/app/pages/reference/rules/rules.component.scss @@ -62,11 +62,11 @@ } @media (max-width: 670px) { - main .container { - text-align: center; - } - .list { margin-left: 50px; } + + .full-page-list { + margin-left: 30px; + } } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index c7b4650..207ade5 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -418,7 +418,7 @@ main .container { // Different resolution changes @media (max-width: 1150px) { - .container { + .container, .customContainer, .columnSection { width: 90%; } @@ -430,5 +430,30 @@ main .container { height: calc(100% - 150px); margin-top: 0; } - +} + +@media (max-width: 690px) { + main .container { + text-align: center; + width: 90%; + padding: 30px 0; + } + + .title { + height: calc(100% - 110px); + margin-top: 100px; + } + + .title h2 { + font-size: 0.9em; + } + + .columnContainer { + width: 100%; + text-align: center; + } + + .paragraph { + width: 100%; + } }