Skip to content

Commit

Permalink
Fixed #22: dashboard UI now usable and responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@rgaudin
rgaudin committed Sep 26, 2023
1 parent 054a279 commit 86c1987
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 60 deletions.
4 changes: 4 additions & 0 deletions dashboard/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
assets/fira
assets/fontawesome
assets/pure-min.css
assets/grids-responsive-min.css
126 changes: 87 additions & 39 deletions dashboard/assets/dashboard.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
:root {
--card-bg-color: #fbfbfb;
--card-border-color: #dddddd;
--card-title-color: #000000;
--card-description-color: #4d4d4d;
--card-meta-color: #909090;
--background-color: #ffffff;
--lang-code-color: #333333;
--lang-code-background: white;
--card-border-color-rgb: rgba(221, 221, 221, 1);
--kiwix-orange: #f19e4b;
}

@font-face {
font-family: 'fira_sansbold';
src: url('./fira/FiraSans-Bold.eot');
Expand All @@ -24,8 +37,13 @@
box-sizing: border-box;
}

html, body {
height: 100%;
}

body {
font-family: 'fira_sansregular', sans-serif;
font-family: 'fira_sansregular', system-ui, sans-serif;
background-color: var(--background-color);
}

a {
Expand All @@ -35,8 +53,6 @@ a {

header {
padding: 1em .5em;
background-color: #fefefe;
color: #333;
border-bottom: .1rem solid #eee;
margin-bottom: 2.5em;
}
Expand All @@ -46,80 +62,112 @@ section.cards {
margin: auto;
}

.align-end {
text-align: end;
}

.card {
color: #444343;
position: relative;
box-sizing: border-box;
box-shadow: 0 0 8px 2px var(--card-border-color-rgb);
color: var(--card-meta-color);
height: 13.7em;
margin: 1rem;
padding: 1rem;
background-color: #f7f7f7;
border: .1rem solid #ececec;
border-radius: .2rem;
background-color: var(--card-bg-color);
border-radius: .1rem;
transition: transform 0.25s;
}

.card:hover {
border-color: rgb(61, 146, 201);
transition: transform 0.25s;
.card .package-link {
height: 48px;
}

.package-icon {
width: 48px;
height: 48px;
}

.package-icon img {
width: 100%;
height: 100%;
}

.card .title {
margin-left: 1rem;
color: var(--card-title-color);

font-size: 26px;
display: flex;
align-items: center;
}

.card .title:hover {
text-shadow: 1px 1px 4px rgba(200, 200, 200, .8);;
}

.card .description {
height: 5em;
text-align: justify-all;
font-weight: 300;
color: #4d4d4d;
color: var(--card-description-color);
line-height: 1.25;
height: 3.75em;
font-size: .9rem;
overflow-y: scroll;
}

.tags-line {
.metadata {
margin-top: 1em;
height: 4em;
font-size: .9rem;
height: 1.7em;

line-height: normal;
vertical-align: middle;
user-select: none;
box-sizing: border-box;
border: none transparent;
text-decoration: none;
border-radius: 2px;
}

.tags {
text-align: end;
color: #909090;
overflow: hidden;
}

white-space: nowrap;
overflow-x: hidden;
.tags .tag:not(:last-child):after {
content: " | ";
}


.lang {
text-transform: uppercase;
background-color: white;
color: black;
background-color: var(--lang-code-background);
color: var(--lang-code-color);
text-align: center;
margin-right: .2rem;
font-size: 70%;
padding: .2rem;
font-weight: bold;
padding: .5rem;
border-radius: 5px;
border: 1px solid var(--card-border-color);
}

.card .download {
box-sizing: border-box;
position: absolute;
bottom: 5px;
right: 0;
}

.download a {
font-size: 70%;
padding: .2rem .8rem;
background-color: #0078e7;
padding: 6px;
background-color: var(--kiwix-orange);
color: #fff;
}

.tags {
text-align: end;
color: #909090;
overflow: hidden;
border-radius: 4px 0 0 0;
}

footer {
position:relative;
bottom:0;
padding: .5em;
color: #fefefe;
background-color: #95A5A6;
color: white;
background-color: var(--kiwix-orange);
margin-top: 3em;
height: auto;
min-height: 4.5rem;
height: 4.5em;
text-align: center;
}
20 changes: 15 additions & 5 deletions dashboard/gen-home.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@
except ImportError:
from yaml import Loader

templates_dir = pathlib.Path(os.getenv("SRC_DIR", "/src")).joinpath("templates")
src_dir = pathlib.Path(os.getenv("SRC_DIR", "/src"))
dest_dir = pathlib.Path(os.getenv("DEST_DIR", "/var/www"))
templates_dir = src_dir.joinpath("templates")
env = Environment(
loader=FileSystemLoader(templates_dir), autoescape=select_autoescape()
)
Expand Down Expand Up @@ -71,10 +73,18 @@ def __init__(self, *args, **kwargs):
except KeyError:
...

@property
def tags(self) -> list[str]:
return [tag for tag in self.get("tags", []) if tag and not tag.startswith("_")]

@property
def private_tags(self) -> list[str]:
return [tag for tag in self.get("tags", []) if tag.startswith("_")]

@staticmethod
def normalize(url: str) -> str:
if not url.strip():
return
return ""
uri = urllib.parse.urlparse(url)
if not uri.scheme and not url.startswith("//"):
url = f"//{url}"
Expand Down Expand Up @@ -111,7 +121,7 @@ def gen_home(fpath: pathlib.Path):
)

try:
with open("/var/www/index.html", "w") as fh:
with open(dest_dir / "index.html", "w") as fh:
fh.write(env.get_template("home.html").render(**context))
except Exception as exc:
print("[CRITICAL] unable to gen homepage, using fallback")
Expand All @@ -122,10 +132,10 @@ def gen_home(fpath: pathlib.Path):


if __name__ == "__main__":
gen_home(pathlib.Path("/src/home.yaml"))
gen_home(src_dir / "home.yaml")

if Conf.debug:
with open("/var/www/index.html", "r") as fh:
with open(dest_dir / "index.html", "r") as fh:
print(fh.read())

if len(sys.argv) < 2:
Expand Down
30 changes: 14 additions & 16 deletions dashboard/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,34 +23,32 @@
</header>
<section class="cards pure-g">
{% for package in packages %}
<div class="pure-u-1 pure-u-md-12-24 pure-u-lg-8-24 pure-u-xxl-1-4 pure-u-x4k-4-24">
<div class="card-container pure-u-1 pure-u-md-12-24 pure-u-lg-8-24 pure-u-xl-1-4 pure-u-xxl-5-24 pure-u-xxxl-4-24 pure-u-x4k-1-24">
<div class="card">
<a class="package-link" href="{{ package.url }}">
<div class="pure-g">
<div class="pure-u-3-4">
<h2>{{ package.title }}</h2>
</div>
<div class="pure-u-1-4 align-end">
{% if package.icon %}<img src="data:image/png;base64,{{ package.icon }}" />{% endif %}
</div>
<div class="pure-g">
<div class="package-icon pure-u-1-4">
{% if package.icon %}<img src="data:image/png;base64,{{ package.icon }}" />{% endif %}
</div>
<div class="pure-u-3-4 title">{{ package.title }}</div>
</div>
</a>
<div class="pure-g">
<p class="description pure-u-1">{{ package.description|default("-") }}</p>
<div class="pure-g description">
<p class="pure-u-1">{{ package.description|default("-") }}</p>
</div>
<div class="pure-g tags-line">
<div class="pure-g metadata">
<div class="pure-u-1-5">
<div class="langs">
{% if package.langs %}{% for lang in package.langs %}<span class="lang">{{ lang }}</span>{% endfor %}{% endif %}
</div>
</div>
<div class="pure-u-1-5 download">
{% if package.download and package.download.url %}<a href="{{ package.download.url }}"><i class="fa-solid fa-download"></i>{% if package.download.size %} {{ package.download.size|fsize }}{% endif %}</a>{% endif %}
</div>
<div class="pure-u-3-5">
{% if package.tags %}<div class="tags">{% for tag in package.tags %}<span class="tag">{{ tag }}</span>{% endfor %}</div>{% endif %}
<div class="pure-u-4-5 tags">
{% if package.tags %}{% for tag in package.tags %}<span class="tag">{{ tag }}</span>{% endfor %}{% endif %}
</div>
</div>
<div class="download">
{% if package.download and package.download.url %}<a title="Download “{{ package.title }}” ZIM file" href="{{ package.download.url }}"><i class="fa-solid fa-download"></i>{% if package.download.size %} {{ package.download.size|fsize }}{% endif %}</a>{% endif %}
</div>
</div>
</div>
{% else %}
Expand Down

0 comments on commit 86c1987

Please sign in to comment.