aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/scss/components.scss1
-rw-r--r--app/scss/nav.scss7
-rw-r--r--app/scss/packagegrid.scss55
-rw-r--r--app/scss/packages.scss1
-rw-r--r--app/scss/page.scss25
-rw-r--r--app/templates/base.html101
-rw-r--r--app/templates/index.html19
7 files changed, 127 insertions, 82 deletions
diff --git a/app/scss/components.scss b/app/scss/components.scss
index 26102a0..c55a539 100644
--- a/app/scss/components.scss
+++ b/app/scss/components.scss
@@ -1,4 +1,3 @@
-
h1 {
margin: 0;
}
diff --git a/app/scss/nav.scss b/app/scss/nav.scss
index 0cf60ea..be70681 100644
--- a/app/scss/nav.scss
+++ b/app/scss/nav.scss
@@ -37,6 +37,10 @@ nav li a {
border-left: 1px solid #444;
}
+nav ul li:last-child a {
+ border-right: 1px solid #444;
+}
+
nav a:hover {
color: #eee;
background: #444;
@@ -61,8 +65,7 @@ li.dropdown {
background: #333;
z-index: 1;
right: 0;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
- // display: none;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
}
.dropdown:hover ul {
diff --git a/app/scss/packagegrid.scss b/app/scss/packagegrid.scss
index f1de7c8..5686b22 100644
--- a/app/scss/packagegrid.scss
+++ b/app/scss/packagegrid.scss
@@ -4,18 +4,17 @@
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
-
padding: 0;
margin: 0;
}
.packagegrid li {
flex: 1;
- display: block;
- min-width: 246px;
- min-height: 164px;
+ display: block;
+ min-width: 300px;
+ min-height: 200px;
padding: 1;
- margin: 5px;
+ margin: 7px;
}
.packagegrid a {
@@ -24,18 +23,52 @@
border-radius: 7px;
position: relative;
overflow: hidden;
- background-size: cover;
+ background-size: cover;
background-repeat: no-repeat;
- background-position: center;
+ background-position: center;
}
+.packagegrid a:hover {
+ // box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.4);
+}
-.packagegrid a span {
+.packagegridscrub {
position: absolute;
- left: 0;
+ top: 50%;
right: 0;
bottom: 0;
+ left: 0;
padding: 5px;
- background: rgba(255, 255, 255, 0.3);
- color: black;
+ background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
+}
+
+.packagegridinfo {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ padding: 1em;
+}
+
+.packagegridinfo h3 {
+ color: white;
+}
+
+.packagegridinfo p {
+ display: none;
+ color: #ddd;
+ font-weight: normal;
+}
+
+.packagegrid a:hover .packagegridinfo {
+ top: 0;
+}
+
+.packagegrid a:hover p {
+ display: block;
+}
+
+.packagegrid a:hover .packagegridscrub {
+ top: 0;
+ background: rgba(0,0,0,0.8);
}
diff --git a/app/scss/packages.scss b/app/scss/packages.scss
index 04230cd..1d13547 100644
--- a/app/scss/packages.scss
+++ b/app/scss/packages.scss
@@ -1,4 +1,3 @@
-
.screenshot_list, .screenshot_list li, .screenshot_list li a {
list-style: none;
margin: 0;
diff --git a/app/scss/page.scss b/app/scss/page.scss
index ab6d3c4..f43da7d 100644
--- a/app/scss/page.scss
+++ b/app/scss/page.scss
@@ -6,16 +6,25 @@ html, body {
margin: 0;
}
-nav, main, #alerts {
+.container, main, #alerts, footer {
width: 90%;
- max-width: 960px;
+ max-width: 1024px;
margin: auto;
padding: 0;
display: block;
}
+main {
+ padding: 7px 0;
+}
+
+header h1, header p, header form {
+ padding: 0 10px;
+ margin-left: 0;
+}
+
header {
- padding: 20px;
+ padding: 30px;
background: #258;
}
@@ -23,16 +32,6 @@ header p {
max-width: 400px;
}
-
-/* Footer */
-
-footer {
- width: 80%;
- max-width: 860px;
- margin: auto;
- padding: 50px 0 20px 0;
-}
-
footer a {
color: #666;
}
diff --git a/app/templates/base.html b/app/templates/base.html
index 504563e..050448b 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -12,65 +12,66 @@
<body>
<nav>
- <ul class="nav navbar-nav navbar-left">
- <li><a href="/"><img src="/static/logo_dark.svg" /></a></li>
- {% for item in current_menu.children recursive %}
- {% if item.visible %}
- <li{% if item.children %} class="dropdown"{% endif %}>
- <a href="{{ item.url }}"
+ <div class="container">
+ <ul class="nav navbar-nav navbar-left">
+ <li><a href="/"><img src="/static/logo_dark.svg" /></a></li>
+ {% for item in current_menu.children recursive %}
+ {% if item.visible %}
+ <li{% if item.children %} class="dropdown"{% endif %}>
+ <a href="{{ item.url }}"
+ {% if item.children %}
+ class="dropdown-toggle"
+ data-toggle="dropdown"
+ role="button"
+ aria-expanded="false"
+ {% endif %}>
+ {{ item.text }}
{% if item.children %}
- class="dropdown-toggle"
- data-toggle="dropdown"
- role="button"
- aria-expanded="false"
- {% endif %}>
- {{ item.text }}
+ <span class="caret"></span>
+ {% endif %}
+ </a>
{% if item.children %}
- <span class="caret"></span>
+ <ul class="dropdown-menu" role="menu">
+ {{ loop(item.children) }}
+ </ul>
{% endif %}
- </a>
- {% if item.children %}
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ {% if current_user.is_authenticated %}
+ <li><a href="{{ url_for('notifications_page') }}">({{ current_user.notifications | length }})</a></li>
+ <li><a href="{{ url_for('create_edit_package_page') }}">+</a></li>
+ <li class="dropdown">
+ <a href="{{ url_for('user_profile_page', username=current_user.username) }}"
+ class="dropdown-toggle"
+ data-toggle="dropdown"
+ role="button"
+ aria-expanded="false">{{ current_user.display_name }}
+ <span class="caret"></span></a>
+
<ul class="dropdown-menu" role="menu">
- {{ loop(item.children) }}
+ <li>
+ <a href="{{ url_for('user_profile_page', username=current_user.username) }}">Profile</a>
+ </li>
+ {% if current_user.canAccessTodoList() %}
+ <li><a href="{{ url_for('todo_page') }}">Work Queue</a></li>
+ {% endif %}
+ {% if current_user.rank == current_user.rank.ADMIN %}
+ <li><a href="{{ url_for('admin_page') }}">Admin</a></li>
+ {% endif %}
+ <li><a href="{{ url_for('user.logout') }}">Sign out</a></li>
</ul>
- {% endif %}
</li>
+ {% else %}
+ <li><a href="{{ url_for('user.login') }}">Sign in</a></li>
{% endif %}
- {% endfor %}
- </ul>
- <ul class="nav navbar-nav navbar-right">
- {% if current_user.is_authenticated %}
- <li><a href="{{ url_for('notifications_page') }}">({{ current_user.notifications | length }})</a></li>
- <li><a href="{{ url_for('create_edit_package_page') }}">+</a></li>
- <li class="dropdown">
- <a href="{{ url_for('user_profile_page', username=current_user.username) }}"
- class="dropdown-toggle"
- data-toggle="dropdown"
- role="button"
- aria-expanded="false">{{ current_user.display_name }}
- <span class="caret"></span></a>
-
- <ul class="dropdown-menu" role="menu">
- <li>
- <a href="{{ url_for('user_profile_page', username=current_user.username) }}">Profile</a>
- </li>
- {% if current_user.canAccessTodoList() %}
- <li><a href="{{ url_for('todo_page') }}">Work Queue</a></li>
- {% endif %}
- {% if current_user.rank == current_user.rank.ADMIN %}
- <li><a href="{{ url_for('admin_page') }}">Admin</a></li>
- {% endif %}
- <li><a href="{{ url_for('user.logout') }}">Sign out</a></li>
- </ul>
- </li>
- {% else %}
- <li><a href="{{ url_for('user.login') }}">Sign in</a></li>
- {% endif %}
- </ul>
- <div style="clear:both;"></div>
+ </ul>
+ <div style="clear:both;"></div>
+ </div>
</nav>
-
{% block flash_messages %}
{%- with messages = get_flashed_messages(with_categories=true) -%}
{% if messages %}
diff --git a/app/templates/index.html b/app/templates/index.html
index 43cd866..62bdb94 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -4,8 +4,9 @@
Dashboard
{% endblock %}
-{% block content %}
- <header>
+{% block container %}
+<header>
+ <div class="container">
<h1>Content DB</h1>
<p>
@@ -19,16 +20,26 @@ Dashboard
<input type="text" name="q" value="{{ query or ''}}" />
<input type="submit" value="Search" />
</form>
- </header>
+ </div>
+</header>
+<main>
<ul class="packagegrid">
{% for p in packages %}
<li><a href="{{ p.getDetailsURL() }}"
style="background-image: url({{ p.getMainScreenshotURL() or '/static/placeholder.png' }});">
- <span>{{ p.title }} by {{ p.author.display_name }}</span>
+ <div class="packagegridscrub"></div>
+ <div class="packagegridinfo">
+ <h3>{{ p.title }} by {{ p.author.display_name }}</h3>
+
+ <p>
+ {{ p.shortDesc }}
+ </p>
+ </div>
</a></li>
{% else %}
<li><i>No packages available</i></ul>
{% endfor %}
</ul>
+</main>
{% endblock %}
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-31 21:09:48 +0000