Skip to content

chore: center layout elements and align widths #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Yasansvr wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

chore: center layout elements and align widths #15

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3207995
chore: center layout elements and align widths
Yasansvr Apr 24, 2026
fc881c5
FIX : removing unnecessary comments
Yasansvr Apr 26, 2026
d37a575
FIX #5 : Create YAML file for adding items to the shop
Yasansvr May 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions shellshop/app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@
from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.widgets import Static
from textual.containers import Container

from .catalog import demo_catalog, demo_merchant, format_price_sats
from .store import StoreState

LOGO = r"""
▄█████ ▄▄ ▄▄ ▄▄▄▄▄ ▄▄ ▄▄ ▄█████ ▄▄ ▄▄ ▄▄▄ ▄▄▄▄
▀▀▀▄▄▄ ██▄██ ██▄▄ ██ ██ ▀▀▀▄▄▄ ██▄██ ██▀██ ██▄█▀
█████▀ ██ ██ ██▄▄▄ ██▄▄▄ ██▄▄▄ █████▀ ██ ██ ▀███▀ ██
▀▀▀▄▄▄ ██▄██ ██▄▄ ██ ██ ▀▀▀▄▄▄ ██▄██ ██▀██ ██▄█▀
█████▀ ██ ██ ██▄▄▄ ██▄▄▄ ██▄▄▄ █████▀ ██ ██ ▀███▀ ██
""".strip("\n")

HOST_FINGERPRINT = "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIGhvc3Qta2V5LXNhdHMtcHJpdmFjeS1ub2Rl"
Expand Down Expand Up @@ -59,22 +60,36 @@ class StorefrontApp(App[None]):
background: ansi_default;
}

#hero-container {
width: 100%;
height:14;
align: center middle; /* This centers the #tabs box horizontally */
Copy link
Copy Markdown
Collaborator

@moakilodash moakilodash Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove the comment from this line

}

#hero {
height: 14;
width: 108;
border: heavy #f7931a;
background: ansi_default;
color: #f6e7c6;
content-align: center middle;
text-align: center;
padding: 1 2;
}

#container-for-tabs {
width: 100%;
height:10%;
align: center middle; /* This centers the #tabs box horizontally */
}

#tabs {
height: 3;
width: 80;
border: round #2f8f83;
background: ansi_default;
Copy link
Copy Markdown
Collaborator

@moakilodash moakilodash Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpicking here, but keep whitespaces consistent

background:ansi_default;
color: #88d0c6;
content-align: center middle;
text-align: center;
margin: 1 0 0 0;
content-align: center middle; /* This centers the text inside the box */
}

#main {
Expand Down Expand Up @@ -143,8 +158,10 @@ def __init__(self, store: StoreState) -> None:

def compose(self) -> ComposeResult:
with Vertical(id="frame"):
yield Static(id="hero")
yield Static(id="tabs")
with Container(id="hero-container"):
yield Static(id="hero")
with Container(id="container-for-tabs"):
yield Static(id="tabs")
with Vertical(id="main"):
with Vertical(id="content-wrap"):
yield Static(id="content")
Expand Down