Add bootstrap, change base template

This commit is contained in:
rubenwardy 2018-12-21 14:45:54 +00:00
parent c9bf7a3245
commit 9da6b45cc3
16 changed files with 9808 additions and 621 deletions

7
app/public/static/bootstrap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

5
app/public/static/popper.min.js vendored Normal file

File diff suppressed because one or more lines are too long

9681
app/scss/bootstrap.scss vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,112 +1,3 @@
h1 {
margin: 0;
}
h2, h3 {
margin: 5px 0;
}
a {
color: #0be;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #0df;
text-decoration: underline;
}
/* Containers */
.box {
border-radius: 5px;
margin: 15px 0;
padding: 0;
}
.box > h2, .box > h3 {
margin: 0;
padding: 0.5em 0.5em 0.5em 15px;
border-bottom: 1px solid #444;
}
.box .box-body {
padding: 1em !important;
}
// .box form {
// padding: 1em;
// }
.box_grey {
background: #333;
border: 1px solid #444;
}
.ul_boxes {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.ul_boxes > li {
padding: 0;
list-style: none;
}
.box_link {
display: block;
color: #ddd;
text-decoration: none;
}
.box_link:hover{
background: #3a3a3a;
}
/*
buttonset
*/
.buttonset, .buttonset li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.buttonset {
margin: 15px 0;
}
.button, .buttonset li a, input[type=submit] {
cursor: pointer;
}
.button, .buttonset li a, input[type=submit], input[type=text],
input[type=password], textarea, select, .bulletselector {
text-align: center;
display: inline-block;
padding: 0.4em 1em;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
color: #ddd;
border-radius: 5px;
text-decoration: none;
font-size: 100%;
}
select > * {
color: #222;
}
input[type=text], input[type=password], textarea, select, .bulletselector {
text-align: left;
}
.ui-autocomplete, ui-front {
position:absolute;
cursor:default;
@ -133,74 +24,6 @@ input[type=text], input[type=password], textarea, select, .bulletselector {
}
}
select {
min-width: 200px;
}
select:not([multiple]) {
background: linear-gradient(#444, #333);
}
.form-group {
padding: 8px 0;
}
.form-group label {
display: block;
vertical-align: top;
padding: 0 8px 8px 0;
}
.form-group input, .form-group textarea, .form-group .bulletselector {
display: block;
min-width: 100%;
max-width: 100%;
}
.box .form-group input, .box .form-group textarea, .form-group .bulletselector {
min-width: 95%;
max-width: 95%;
}
.form-group textarea {
min-height: 200px;
}
.button:hover, .buttonset li a:hover, input[type=submit]:hover {
background: rgba(255,255,255,0.13);
border: 1px solid rgba(255,255,255,0.17);
text-decoration: none;
color: #ddd;
}
.btn_green {
background: #363 !important;
border: 1px solid #473;
}
.btn_green:hover {
background: #474 !important;
}
.linedbuttonset a {
border: 1px solid #eee;
border-radius: 3px;
padding: 4px 10px;
margin: 0;
display: block;
}
.linedbuttonset {
display: block;
margin: 0;
}
.linedbuttonset li {
display: inline-block;
margin: 10px 10px 0 0;
}
.bulletselector input {
border: none;
border-radius: 0;
@ -237,146 +60,6 @@ select:not([multiple]) {
}
/* Alerts */
.alert .alert_right, .alert > form {
display: inline-block;
margin: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.alert {
padding: 10px;
position: relative;
.alert_right:not(.button) {
padding: 0;
}
.alert_right form {
height: 100%;
}
form {
display: inline-block;
margin: 0;
padding: 0;
}
input {
height: 100%;
}
input, .button {
margin: 0;
background: 0;
border: 0;
border-left: 1px solid rgba(255,255,255,0.12);
border-radius: 0;
vertical-align: middle;
}
input:hover, .button:hover {
border: 0;
border-left: 1px solid rgba(255,255,255,0.2);
}
}
#alerts {
list-style: none;
position: fixed;
bottom: 15px;
left: 0;
right: 0;
z-index: 1000;
}
#alerts .alert {
margin: 5px 0;
vertical-align: middle;
}
#alerts .close {
float: right;
color: white;
}
#alerts .close:hover {
color: #fff;
}
.alert-error, .button-danger {
background: #933 !important;
border: 1px solid #c44 !important;
}
.alert-warning {
background: #963;
border: 1px solid #c96;
}
.alert-primary {
background: #339;
border: 1px solid #66a;
}
.alert-success {
background: #161;
border: 1px solid #393;
}
table.fancyTable {
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #000000;
background-color: #4A4A4A;
width: 100%;
text-align: center;
border-collapse: collapse;
}
table.fancyTable td, table.fancyTable th {
border: 1px solid #4A4A4A;
padding: 3px 2px;
}
table.fancyTable tbody td {
font-size: 13px;
color: #E6E6E6;
}
table.fancyTable tr:nth-child(even) {
background: #888888;
}
table.fancyTable thead {
background: #000000;
border-bottom: 3px solid #000000;
}
table.fancyTable thead th {
font-size: 15px;
font-weight: bold;
color: #E6E6E6;
text-align: center;
border-left: 2px solid #4A4A4A;
}
table.fancyTable thead th:first-child {
border-left: none;
}
table.fancyTable tfoot {
font-size: 12px;
font-weight: bold;
color: #E6E6E6;
background: #000000;
background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
border-top: 1px solid #4A4A4A;
}
table.fancyTable tfoot td {
font-size: 12px;
}
.t-mll tr td:not(:first-child) {
text-align: left;
}
@ -405,57 +88,6 @@ table.fancyTable tfoot td {
color: #2c2;
}
/*
Aside
*/
.asideright {
float: right;
margin: 0 0 0 15px;
max-width: 300px;
}
.outsidecontainer {
position: absolute;
right: 102%;
top: 0;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
@media (max-width: 1490px) {
.outsidecontainer {
display: none;
}
}
.flatlist, .flatlist li {
list-style: none;
padding: 0;
margin: 0;
}
.flatlist li {
display: block;
}
.flatlist a {
display: block;
padding: 0.5em 20px;
color: #ddd;
font-weight: normal;
}
.flatlist a:hover {
background: #444;
text-decoration: none;
}
.table-topalign td {
vertical-align: top;
}
.wiptopic a {
color: #7ac;
}

View File

@ -1,6 +1,13 @@
@import "page.scss";
@import "bootstrap.scss";
@import "components.scss";
@import "nav.scss";
@import "packages.scss";
@import "packagegrid.scss";
@import "comments.scss";
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-link > img {
max-height: 1em;
}

View File

@ -1,90 +0,0 @@
nav {
margin: 0 auto 0 auto;
list-style: none;
background: #333;
}
nav .navbar-left {
float: left;
}
nav .navbar-left li {
float: left;
}
nav .navbar-right {
float: right;
}
nav ul {
margin: 0 auto 0 auto;
padding: 0;
list-style: none;
}
nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
nav li a {
color: #ddd;
margin: 0;
padding: 1em 1em;
display: block;
border-left: 1px solid #444;
}
nav li a:not([href]) {
cursor: default;
}
nav ul li:last-child a {
border-right: 1px solid #444;
}
nav a:hover {
color: #eee;
background: #444;
text-decoration: none;
}
nav img {
height: 1em;
}
li.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
margin: 0;
padding: 0;
min-width:160px;
background: #333;
z-index: 1;
right: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
}
.dropdown:hover ul {
display: block;
}
.dropdown li {
display: block;
}
.dropdown li a {
border: none;
border-top: 1px solid #444;
}
.dropdown li:last-child a {
border-bottom: 1px solid #444;
}

View File

@ -1,56 +0,0 @@
html, body {
font-family: "Arial", sans-serif;
background: #222;
color: #ddd;
padding: 0;
margin: 0;
}
.container, main, #alerts, footer {
width: 90%;
max-width: 1024px;
margin: auto;
padding: 0;
display: block;
}
main {
padding: 7px 0;
position: relative;
box-sizing: border-box;
}
.clearboth {
clear: both;
}
header h1, header p, header form {
padding: 0 5px;
margin-left: 0;
}
header {
padding: 30px;
background: #258;
}
header p {
max-width: 400px;
}
header input {
margin: 3px;
}
footer {
color: #999;
padding: 30px 0;
}
footer a {
color: #aaa;
}
footer a:hover {
color: #bbb;
}

View File

@ -20,7 +20,7 @@
<select name="action">
<option value="importmodlist" selected>Import forum topics</option>
<option value="recalcscores">Recalculate package scores</option>
<!-- <option value="importscreenshots">Import screenshots from VCS</option> -->
<option value="importscreenshots">Import screenshots from VCS</option>
<!-- <option value="importdepends">Import dependencies from downloads</option> -->
<!-- <option value="modprovides">Set provides to mod name</option> -->
<!-- <option value="vcsrelease">Create VCS releases</option> -->

View File

@ -11,70 +11,81 @@
</head>
<body>
<nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li><a href="/">{{ config.USER_APP_NAME }}</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 %}
<span class="caret"></span>
{% endif %}
</a>
{% if item.children %}
<ul class="dropdown-menu" role="menu">
{{ loop(item.children) }}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if current_user.is_authenticated %}
<li><a href="{{ url_for('notifications_page') }}">
<img src="/static/notification{% if current_user.notifications %}_alert{% endif %}.svg" />
</a></li>
<li><a href="{{ url_for('create_edit_package_page') }}">+</a></li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-expanded="false">{{ current_user.display_name }}
<span class="caret"></span></a>
<a class="navbar-brand" href="/">{{ config.USER_APP_NAME }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url_for('user_profile_page', username=current_user.username) }}">Profile</a>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
{% for item in current_menu.children recursive %}
{% if item.visible %}
<li class="nav-item {% if item.children %} dropdown{% endif %}">
<a class="nav-link" href="{{ item.url }}"
{% if item.children %}
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-expanded="false"
{% endif %}>
{{ item.text }}
{% if item.children %}
<span class="caret"></span>
{% endif %}
</a>
{% if item.children %}
<ul class="dropdown-menu" role="menu">
{{ loop(item.children) }}
</ul>
{% endif %}
</li>
{% if current_user.canAccessTodoList() %}
<li><a href="{{ url_for('todo_page') }}">Work Queue</a></li>
<li><a href="{{ url_for('user_list_page') }}">User list</a></li>
{% endif %}
{% if current_user.rank == current_user.rank.ADMIN %}
<li><a href="{{ url_for('admin_page') }}">Admin</a></li>
{% endif %}
{% if current_user.rank == current_user.rank.MODERATOR %}
<li><a href="{{ url_for('tag_list_page') }}">Tag Editor</a></li>
<li><a href="{{ url_for('license_list_page') }}">License Editor</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 class="clearboth"></div>
{% endif %}
{% endfor %}
</ul>
<form class="form-inline my-2 my-lg-0" method="GET" action="/packages/">
{% if type %}<input type="hidden" name="type" value="{{ type }}" />{% endif %}
<input class="form-control mr-sm-2" name="q" type="text" placeholder="Search {{ title | lower or 'all packages' }}" value="{{ query or ''}}">
<input class="btn btn-secondary my-2 my-sm-0 mr-sm-2" type="submit" value="Search" />
<input class="btn btn-primary my-2 my-sm-0" type="submit" name="lucky" value="Lucky" />
</form>
<ul class="navbar-nav ml-auto">
{% if current_user.is_authenticated %}
<li class="nav-item"><a class="nav-link" href="{{ url_for('notifications_page') }}">
<img src="/static/notification{% if current_user.notifications %}_alert{% endif %}.svg" />
</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('create_edit_package_page') }}">+</a></li>
<li class="nav-item dropdown">
<a class="nav-link 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 class="nav-item">
<a class="nav-link" href="{{ url_for('user_profile_page', username=current_user.username) }}">Profile</a>
</li class="nav-item">
{% if current_user.canAccessTodoList() %}
<li class="nav-item"><a class="nav-link" href="{{ url_for('todo_page') }}">Work Queue</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('user_list_page') }}">User list</a></li>
{% endif %}
{% if current_user.rank == current_user.rank.ADMIN %}
<li class="nav-item"><a class="nav-link" href="{{ url_for('admin_page') }}">Admin</a></li>
{% endif %}
{% if current_user.rank == current_user.rank.MODERATOR %}
<li class="nav-item"><a class="nav-link" href="{{ url_for('tag_list_page') }}">Tag Editor</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('license_list_page') }}">License Editor</a></li>
{% endif %}
<li class="nav-item"><a class="nav-link" href="{{ url_for('user.logout') }}">Sign out</a></li>
</ul>
</li>
{% else %}
<li><a class="nav-link" href="{{ url_for('user.login') }}">Sign in</a></li>
{% endif %}
</ul>
</div>
</div>
</nav>
@ -97,16 +108,21 @@
{% endblock %}
{% block container %}
<main>
<main class="container mt-4">
{% block content %}
{% endblock %}
</main>
{% endblock %}
<footer>
<footer class="container">
ContentDB &copy; 2018 to <a href="https://rubenwardy.com/">rubenwardy</a> |
<a href="https://github.com/minetest/contentdb">GitHub</a> |
<a href="{{ url_for('flatpage', path='help') }}">Help</a> |
<a href="{{ url_for('flatpage', path='help/reporting') }}">Report / DMCA</a>
</footer>
<script src="static/jquery.min.js"></script>
<script src="static/popper.min.js"></script>
<script src="static/bootstrap.min.js"></script>
</body>
</html>

View File

@ -61,7 +61,7 @@ Sign in
</p>
<h3>Sign in with Github</h3>
<p><a class="button" href="{{ url_for('github_signin_page') }}">GitHub</a></p>
<p><a class="btn" href="{{ url_for('github_signin_page') }}">GitHub</a></p>
</form>
</div>
@ -72,7 +72,7 @@ Sign in
<div class="box-body">
<p>Create an account using your forum account or email.</p>
<a href="{{ url_for('user_claim_page') }}" class="button">{%trans%}Claim your account{%endtrans%}</a>
<a href="{{ url_for('user_claim_page') }}" class="btn">{%trans%}Claim your account{%endtrans%}</a>
</div>
</aside>
</div>

View File

@ -5,9 +5,19 @@ Welcome
{% endblock %}
{% block container %}
<header>
<!-- <div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div> -->
<header class="jumbotron">
<div class="container">
<h1>Content DB</h1>
<h1 class="display-3">Content DB</h1>
<p>
Minetest's official content repository.
@ -16,20 +26,20 @@ Welcome
and open source license.
</p>
<form method="get" action="/packages/">
<!-- <form method="get" action="/packages/">
<input type="text" name="q" value="{{ query or ''}}" />
<input type="submit" value="Search" />
</form>
</form> -->
</div>
</header>
<main>
<main class="container">
{% from "macros/packagegridtile.html" import render_pkggrid %}
<h2>Popular</h2>
{{ render_pkggrid(popular) }}
<a href="{{ url_for('packages_page') }}" class="button">Show More</a>
<a href="{{ url_for('packages_page') }}" class="btn">Show More</a>
<h2 style="margin-top:2em;">Newly Added</h2>
{{ render_pkggrid(new) }}

View File

@ -57,8 +57,8 @@
{{ render_field(form.repo, class_="pkg_repo") }}
<div class="pkg_wiz_1">
<a id="pkg_wiz_1_next" class="button button-primary">Next (Autoimport)</a>
<a id="pkg_wiz_1_skip" class="button button-default">Skip Autoimport</a>
<a id="pkg_wiz_1_next" class="btn btn-primary">Next (Autoimport)</a>
<a id="pkg_wiz_1_skip" class="btn btn-default">Skip Autoimport</a>
</div>
<div class="pkg_wiz_2">

View File

@ -12,7 +12,7 @@
<p>This action can be undone by the admin, but he'll be very annoyed!</p>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="submit" value="Delete" class="button-danger" />
<input type="submit" value="Delete" class="btn-danger" />
</div>
</form>
{% endblock %}

View File

@ -5,35 +5,10 @@
{% endblock %}
{% block content %}
<form method="get" action="" class="plsearchform">
{% if type %}<input type="hidden" name="type" value="{{ type }}" />{% endif %}
<input type="text" name="q" value="{{ query or ''}}" />
<input type="submit" value="Search" />
<input type="submit" name="lucky" value="I'm feeling lucky" />
<p>
Found {{ packages_count }} packages.
</p>
</form>
<!--<aside class="box box_grey outsidecontainer">
<h3>Tags</h3>
<ul class="flatlist">
{% for t in tags %}
<li><a href="{{ url_for('packages_page', q=(query or '')+' tag:'+t.name, type=type) }}">
{{ t.title }}
</a></li>
{% else %}
<li><i>No tags available</i></ul>
{% endfor %}
</ul>
</aside> -->
{% from "macros/packagegridtile.html" import render_pkggrid %}
{{ render_pkggrid(packages) }}
<ul class="buttonset linedbuttonset">
<ul class="btnset linedbuttonset">
{% if prev_url %}<li><a href="{{ prev_url }}">Previous</a></li>{% endif %}
<li>{{ page }} / {{ page_max }}</li>
{% if next_url %}<li><a href="{{ next_url }}">Next</a></li> {% endif %}

View File

@ -16,7 +16,7 @@
You need to create releases even if you use a rolling release development cycle,
as Minetest needs them to check for updates.
</p>
<a class="button" href="{{ package.getCreateReleaseURL() }}">Create Release</a>
<a class="btn" href="{{ package.getCreateReleaseURL() }}">Create Release</a>
{% else %}
A release is required before this package can be approved.
{% endif %}
@ -158,7 +158,7 @@
</tr>
</table>
<ul class="buttonset linedbuttonset">
<ul class="btnset linedbuttonset">
{% if package.getDownloadRelease() %}<li><a href="{{ package.getDownloadURL() }}" class="btn_green">Download</a></li>{% endif %}
{% if package.repo %}<li><a href="{{ package.repo }}">View Source</a></li>{% endif %}
{% if package.forums %}<li><a href="https://forum.minetest.net/viewtopic.php?t={{ package.forums }}">Forums</a></li>{% endif %}

View File

@ -19,7 +19,7 @@ Creating an Account
Please log out to continue.
</p>
<p>
<a href="{{ url_for('user.logout', next=url_for('user_claim_page')) }}" class="button">Logout</a>
<a href="{{ url_for('user.logout', next=url_for('user_claim_page')) }}" class="btn">Logout</a>
</p>
{% else %}
<p>
@ -108,7 +108,7 @@ Creating an Account
options.
</p>
<a class="button" href="{{ url_for('user.register') }}">Register</a>
<a class="btn" href="{{ url_for('user.register') }}">Register</a>
</div>
</div>
{% endif %}