Commit 8c83765b authored by VoidOutput's avatar VoidOutput Committed by Emma

Design changes

parent eca83ad4
Pipeline #54371634 passed with stages
in 13 minutes and 52 seconds
@import (reference) '_mixins';
.content-wrapper {
display: flex;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "body sidebar" "footer sidebar";
flex: 1 0 auto;
@media screen and (max-width: 767px) {
display: flex;
flex-direction: column;
}
& > .body {
grid-area: body;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
margin: 1rem;
}
& > .sidebar {
grid-area: sidebar;
flex: none;
min-width: 0;
}
margin: 0 1rem;
& > footer {
grid-area: footer;
}
}
.site-alerts {
margin: 0 1rem;
.alert {
margin-top: 1rem;
}
&:empty {
display: none;
}
......
......@@ -2,7 +2,7 @@
.button {
.unbuttonize();
border-radius: 4px;
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-size: 120%;
......@@ -23,15 +23,17 @@
&:not(&--secondary) {
background-color: var(--primary);
color: var(--primary-fg);
transition: background-color 0.3s;
&:hover {
background-color: var(--primary-alt);
background-color: var(--primary-bright);
}
}
&--secondary {
background-color: var(--accent);
color: var(--accent-fg);
transition: background-color 0.3s;
&:hover {
background-color: var(--accent-alt);
......
......@@ -23,23 +23,28 @@
*/
.comment {
background: var(--bg-page);
border: solid 1px var(--border);
border: solid 1px var(--border-light);
border-left-width: 3px;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
& .comment {
margin-left: 10px;
}
// new approach to borders - may or may not deprecate the old approach
&--with-context {
border-width: 0 0 1px;
& > .comment {
&__row {
border: solid var(--border);
border: solid var(--border-light);
border-width: 1px 1px 0;
}
&__replies {
border: solid var(--border);
border: solid var(--border-light);
border-width: 0 1px 0 1px;
}
}
......@@ -70,6 +75,7 @@
&__body {
padding-right: 0.5rem;
max-width: var(--paragraph-width);
}
&__nav {
......
......@@ -2,20 +2,22 @@
display: flex;
flex-direction: column;
@media screen and (max-width: 768px) {
margin-top: 3rem;
border-top: 1px solid var(--border-light);
}
@media screen and (min-width: 768px) {
margin-left: 1rem;
float: right;
max-width: 20rem;
&__search {
max-width: 200px;
}
width: 20rem;
background: var(--bg-sidebar);
border-left: 1px solid var(--border-light);
}
&__section {
background: var(--sidebar-card);
padding: 1rem 1rem 0;
margin-bottom: 1rem;
background: var(--bg-page);
border-bottom: 1px solid var(--border-light);
}
&__title {
......@@ -27,4 +29,21 @@
&:empty {
display: none;
}
& summary {
cursor: pointer;
}
&__list {
margin-bottom: 1rem !important;
&:empty {
display: none;
}
> li > a {
display: block;
padding: .2em .4em;
}
}
}
......@@ -3,7 +3,7 @@
.site-nav {
background-color: var(--primary);
margin-bottom: 1rem;
background-image: linear-gradient(to left, var(--primary), var(--primary-bright));
&__container {
display: flex;
......
......@@ -10,9 +10,21 @@
&[type="password"],
&[type="email"],
&[type="url"],
&[type="search"] {
&[type="search"],
&[type="date"],
&[type="time"],
textarea& {
-webkit-appearance: none; // disable ugly shade on iOS
border-radius: 0; // disable rounded corners on iOS
transition: box-shadow 0.1s, border-color 0.1s;
}
input&:not([type]),
&[type="text"],
&[type="password"],
&[type="email"],
&[type="url"],
&[type="search"] {
max-width: 100%;
&:not([size]) {
......@@ -22,33 +34,35 @@
&[type="date"],
&[type="time"] {
-webkit-appearance: none;
border-radius: 0;
min-height: ~'calc(1rem + var(--font-size) * var(--line-height))';
min-height: calc(1rem + var(--font-size) * var(--line-height));
min-width: 5rem; // fix for iOS
}
select&:not([multiple]) {
height: ~'calc(1rem + var(--font-size) * var(--line-height))';
}
textarea& {
-webkit-appearance: none; // disable ugly shade on iOS
border-radius: 0; // disable rounded corners on iOS
min-height: ~'calc(1rem + var(--font-size) * var(--line-height))';
min-height: calc(1rem + var(--font-size) * var(--line-height));
max-width: 100%;
resize: vertical;
width: 100%;
transition: box-shadow 0.1s;
&:not([cols]) {
width: 100%;
}
}
&:focus {
border-color: var(--primary);
outline: none;
select&:not([multiple]) {
height: calc(1rem + var(--font-size) * var(--line-height));
}
&:invalid {
box-shadow: unset; // remove default browser style
}
&:focus {
border-color: var(--primary);
box-shadow: 0 0 2px 2px var(--primary-alpha);
outline: none; // remove default browser style
}
&[disabled] {
background-color: var(--bg-grey);
color: var(--fg-grey);
......
......@@ -36,6 +36,7 @@
&__body {
padding-top: 1rem;
max-width: var(--paragraph-width);
}
&__header > * {
......@@ -73,3 +74,26 @@
}
}
}
.submission-meta {
&__short-url {
& > span {
display: block;
}
& > :first-child {
color: var(--text-muted);
font-size: 0.8rem;
}
& > :last-child {
padding: .2em .4em;
background: var(--fg-broken);
color: var(--text-invert);
font-family: var(--mono-font-family);
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
}
}
.wiki-article {
max-width: var(--paragraph-width);
margin: 0 auto;
width: 100%;
&__title {
font-size: 3rem;
letter-spacing: -.05em;
border-bottom: 1px solid var(--border-light);
}
}
.wiki-lock-notice {
display: flex;
align-items: center;
border: 1px solid var(--border-light);
border-radius: 3px;
> * {
padding: .3em .6em;
}
> :first-child {
border-right: solid 1px var(--border-light);
color: var(--text-muted);
font-size: 2em;
}
> :last-child {
flex: 1 1 auto;
}
}
......@@ -54,3 +54,4 @@
@import '_navigation';
@import '_submissions';
@import '_votes';
@import '_wiki';
......@@ -9,6 +9,7 @@
--line-height: 1.5;
--mono-font-family: Roboto Mono, monospace;
--mono-font-size: 14px;
--paragraph-width: 80ch;
--link: #faa;
--submission-link: #fff;
......@@ -17,12 +18,13 @@
--primary: #c00;
--primary-alt: #a00;
--primary-bright: #e10;
--primary-alpha: #c006;
--primary-fg: #fff;
--accent: #424242;
--accent-alt: #525252;
--accent-fg: #fff;
--card: var(--bg-page);
--sidebar-card: #010;
--notification: #f60;
......@@ -31,16 +33,25 @@
--bg-green: #004200;
--bg-blue: #003666;
--bg-grey: #424242;
--bg-sidebar: #161616;
--bg-page: #000;
--text: #ccc;
--text-muted: #909090;
--text-invert: #1a1a1a;
--fg-broken: #cfcfcf;
--fg-red: #f00;
--fg-orange: #fa4;
--fg-green: #8f8;
--fg-blue: #4af;
--fg-grey: #777;
--border: #666;
--border-light: rgb(51, 51, 51);
}
::selection {
background-color: var(--primary);
color: var(--text-invert);
}
.select2-container {
......
......@@ -9,6 +9,7 @@
--line-height: 1.5;
--mono-font-family: Roboto Mono, monospace;
--mono-font-size: 14px;
--paragraph-width: 80ch;
--link: var(--primary);
--submission-link: var(--text);
......@@ -17,12 +18,13 @@
--primary: #c00;
--primary-alt: #a00;
--primary-bright: #e10;
--primary-alpha: #c002;
--primary-fg: #fff;
--accent: var(--bg-grey);
--accent-alt: #dedede;
--accent-fg: #000;
--card: var(--bg-page);
--sidebar-card: #efe;
--notification: #f60;
......@@ -31,14 +33,23 @@
--bg-green: #dfd;
--bg-blue: #def;
--bg-grey: #efefef;
--bg-sidebar: #fafafa;
--bg-page: #fff;
--text: #000;
--text-muted: #505050;
--text-invert: #fafafa;
--fg-broken: #222;
--fg-red: #f00;
--fg-orange: #f80;
--fg-green: #080;
--fg-blue: #08f;
--fg-grey: #888;
--border: #aaa;
--border-light: #ddd;
}
::selection {
background-color: var(--primary);
color: var(--text-invert);
}
......@@ -22,7 +22,7 @@
</p>
<div class="form-row form__row">
<button class="button" type="submit">
<button class="button button--secondary" type="submit">
{{ 'action.search'|trans }}
</button>
</div>
......
......@@ -43,19 +43,17 @@
<div class="content-wrapper">
<main class="body">{% block body %}{% endblock %}</main>
<aside class="sidebar">{% block sidebar %}{% endblock %}</aside>
</div>
{% endblock %}
{% block site_footer %}
<footer class="site-footer">
<p class="site-footer-version">
{{ 'site_footer.version'|trans({
'%branch%': app_branch(),
'%version%': app_version(),
'%app%': '<a href="https://postmill.xyz/">Postmill</a>',
})|raw }}
</p>
</footer>
<footer class="site-footer">
<p class="site-footer-version">
{{ 'site_footer.version'|trans({
'%branch%': app_branch(),
'%version%': app_version(),
'%app%': '<a href="https://postmill.xyz/">Postmill</a>',
})|raw }}
</p>
</footer>
</div>
{% endblock %}
{% block javascripts %}
......
{% macro forum_list_header() %}
<h1 class="page-heading">{{ 'forum_list.page_title'|trans }}</h1>
<nav class="tabs forum-list-view-selector">
<ul class="unlistify tabs__bar">
{% with { active: app.request.attributes.get('_route') == 'forum_list' } %}
......@@ -18,8 +20,6 @@
</ul>
</nav>
<h1 class="page-heading">{{ 'forum_list.page_title'|trans }}</h1>
{% if is_granted('create_forum') %}
<p role="navigation">
<a href="{{ path('create_forum') }}" class="button">{{ 'forum_list.create_forum'|trans }}</a>
......
......@@ -114,7 +114,7 @@
{% set items = items|merge({('nav.delete_forum'|trans): item}) %}
{% endif %}
<ul>
<ul class="sidebar__list unlistify">
{% for key in items|keys|sort %}
{{ items[key] }}
{% endfor %}
......@@ -125,7 +125,7 @@
{% if forum.moderators|length > 0 %}
<section class="sidebar__section sidebar__section--forum-moderators forum-moderators">
<h1 class="sidebar__title"><a href="{{ path('forum_moderators', {forum_name: forum.name}) }}">{{ 'forum.moderators'|trans }}</a></h1>
<ul>
<ul class="sidebar__list unlistify">
{% for moderator in forum.moderators %}
<li class="break-text">
<a href="{{ path('user', {username: moderator.user.username}) }}">
......
......@@ -29,7 +29,7 @@
<section class="sidebar__section">
<h1 class="sidebar__title">{{ 'heading.multi_forum_view'|trans }}</h1>
<ul>
<ul class="sidebar__list unlistify">
{% for forum in forums %}
<li><a href="{{ path('forum', {forum_name: forum}) }}">{{ forum }}</a></li>
{% endfor %}
......
......@@ -9,7 +9,7 @@
<h1 class="sidebar__title">{{ 'front.featured_forums'|trans }}</h1>
{% if forums|length > 0 %}
<ul>
<ul class="sidebar__list unlistify">
{% for name in forums %}
<li><a href="{{ path('forum', {forum_name: name}) }}">{{ name }}</a></li>
{% endfor %}
......
......@@ -18,7 +18,7 @@
{%- if forums|length > 0 -%}
<section class="sidebar__section">
<h1 class="sidebar__title">{{ 'heading.forums_you_moderate'|trans }}</h1>
<ul>
<ul class="sidebar__list unlistify">
{% for forum in forums %}
<li><a href="{{ path('forum', {forum_name: forum}) }}">{{ forum }}</a></li>
{% endfor %}
......
......@@ -21,7 +21,7 @@
{% endif %}
{% if forums|length > 0 %}
<ul>
<ul class="sidebar__list unlistify">
{% for name in forums %}
<li><a href="{{ path('forum', {forum_name: name}) }}">{{ name }}</a></li>
{% endfor %}
......
......@@ -19,17 +19,15 @@
</span>
</p>
<p class="submission-meta__short-url">{{ 'item.short_url'|trans({
'%url%': '<a href="%s" rel="nofollow"><kbd>%s</kbd></a>'|format(
url('submission_shortcut', {id: submission.id})|e,
url('submission_shortcut', {id: submission.id})|replace({
'https://www.': '',
'https://': '',
'http://www.': '',
'http://': ''
})|e
)})|raw
}}</p>
<p class="submission-meta__short-url">
<span>
{{ 'item.short_url'|trans }}
</span>
<span>
{{ url('submission_shortcut', {id: submission.id})|e }}
</span>
</p>
</section>
{{ parent() }}
......
......@@ -14,3 +14,5 @@
{% endfor %}
</ul>
</nav>
<h1 class="page-heading break-text no-desktop">{{ user.username }}</h1>
......@@ -66,7 +66,7 @@
{% if toolbox_items %}
<section class="sidebar__section sidebar__section--user-toolbox">
<h1 class="sidebar__title">{{ 'label.toolbox'|trans }}</h1>
<ul>
<ul class="sidebar__list unlistify">
{% for item in toolbox_items %}
{{ item }}
{% endfor %}
......@@ -80,7 +80,7 @@
<form action="{{ path(user.trusted ? 'mark_user_untrusted' : 'mark_user_trusted', {username: user.username}) }}" method="post" class="form">
<input type="hidden" name="token" value="{{ csrf_token('mark_trusted') }}">
<div class="form__row">
<button class="button">{{ (not user.trusted ? 'action.mark_as_trusted' : 'action.mark_as_untrusted')|trans }}</button>
<button class="button button--secondary">{{ (not user.trusted ? 'action.mark_as_trusted' : 'action.mark_as_untrusted')|trans }}</button>
</div>
</form>
</section>
......
......@@ -13,8 +13,6 @@
{% block body %}
{{ include('user/_nav.html.twig', {current: 'user_comments', user: user}, with_context=false) }}
<h1 class="page-heading">{{ block('title') }}</h1>
{% for comment in comments %}
{{ comment(comment, {show_context: true}) }}
{% else %}
......
......@@ -13,8 +13,6 @@
{% block body %}
{{ include('user/_nav.html.twig', {current: 'user_submissions', user: user}, with_context=false) }}
<h1 class="page-heading">{{ block('title') }}</h1>
{% for submission in submissions %}
{{ submission(submission) }}
{% else %}
......
......@@ -13,8 +13,6 @@
{% block body %}
{{ include('user/_nav.html.twig', {current: 'user', user: user}, with_context=false) }}
<h1 class="page-heading break-text">{{ user.username }}</h1>
{% for contribution in contributions %}
{% if contribution.type == 'submission' %}
{{ submission(contribution.submission) }}
......
{% extends 'base.html.twig' %}
{% block page_classes %}
wiki-page
{% endblock %}
{% from '_macros/icon.html.twig' import icon %}
{% block title %}
{{ page.latestRevision.title }}
......@@ -13,10 +10,10 @@
{% endblock %}
{% block body %}
<article class="wiki-page">
<h1 class="wiki-page-title">{{ block('title') }}</h1>
<article class="wiki-article">
<h1 class="page-heading wiki-article__title">{{ block('title') }}</h1>
<div class="wiki-page-body">
<div class="wiki-article__body">
{{ page.latestRevision.body|cached_markdown({ context: 'wiki', page: page })|raw }}
</div>
</article>
......@@ -36,7 +33,10 @@
</p>
{% if page.locked %}
<p>{{ 'wiki.locked_notice'|trans }}</p>
<p class="wiki-lock-notice">
<span>{{ icon('lock') }}</span>
<span>{{ 'wiki.locked_notice'|trans }}</span>
</p>
{% endif %}
{% if is_granted('lock', page) or is_granted('delete', page) %}
......@@ -67,7 +67,7 @@
<section class="sidebar__section sidebar__section--wiki-toolbox">
<h1 class="sidebar__title">{{ 'label.toolbox'|trans }}</h1>
<ul>
<ul class="sidebar__list unlistify">
{% if is_granted('write', page) %}
<li><a href="{{ path('wiki_edit', {path: page.path}) }}">{{ 'wiki.edit_page'|trans }}</a></li>
{% endif %}
......@@ -78,7 +78,7 @@
<section class="sidebar__section sidebar__section--wiki-navigation">
<h1 class="sidebar__title">{{ 'wiki.navigation'|trans }}</h1>
<ul>
<ul class="sidebar__list unlistify">
<li><a href="{{ path('wiki_all') }}">{{ 'wiki.all_pages'|trans }}</a></li>
<li><a href="{{ path('wiki_recent_changes') }}">{{ 'label.recent_changes'|trans }}</a></li>
</ul>
......
......@@ -11,13 +11,15 @@
{% block body %}
<h1 class="page-heading">{{ block('title') }}</h1>
<hr>
<article>
<h1>{{ revision.title }}</h1>
<article class="wiki-article">
<h1 class="wiki-article__title">{{ revision.title }}</h1>
{{ revision.body|cached_markdown({ context: 'wiki', page: page })|raw }}
<div class="wiki-article__body">
{{ revision.body|cached_markdown({ context: 'wiki', page: page })|raw }}
</div>
</article>
<hr>
<h1>{{ 'label.source_code'|trans }}</h1>
......
......@@ -226,7 +226,7 @@ inbox:
message_reply_head: 'Re: %title%'
item:
short_url: 'Short URL: %url%'
short_url: 'Short URL'
label:
name: Name
......
......@@ -194,7 +194,7 @@ inbox:
message_reply_head: 'Re: %title%'
item:
short_url: 'Mallonga URL: %url%'
short_url: 'Mallonga URL'
label:
name: Nomo
......
......@@ -199,7 +199,7 @@ inbox:
message_reply_head: 'Re: %title%'
item:
short_url: 'URL corta: %url%'
short_url: 'URL corta'
label:
name: Nombre
......
......@@ -202,7 +202,7 @@ inbox:
message_reply_head: 'Re: %title%'
item:
short_url: 'URL courte: %url%'
short_url: 'URL courte'
label:
name: Nom
author: Auteur
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment