GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[UI] Basic implementation of the new base design

Browse Source
This commit is contained in:
rainydaysavings 2020-07-12 23:32:24 +01:00 committed by Hugo Sales
parent 115257f3bb
commit 4eaf272929
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
4 changed files with 124 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
public/assets/css/base.css
View File

@ -6,7 +6,8 @@
--medium-size: 0.8em; --medium-size: 0.8em;
--small-size: 0.65em; --small-size: 0.65em;
--unit-size: 1em; --unit-size: 1em;
--side-margin: 20%; --side-margin: 5em;
--nav-size: 12em;
} }
body, body,
@ -29,55 +30,28 @@ ul {
list-style: none; list-style: none;
} }
.drop-down ul li { li {
position: relative; margin: 0;
z-index: 2; padding: 0;
}
.drop-down ul li ul a {
line-height: 0.8em;
}
.drop-down ul li ul {
display: none;
position: absolute;
background-color: #F6F6F6;
padding: 0.4em 0.8em 0.8em 0.8em;
border-radius: 0.5em;
color: #29323c;
}
.drop-down ul li:hover ul {
display: block;
}
.drop-down ul li ul a:hover {
color: rgb(0, 0, 0);
transition: all 0.8s ease;
}
#hover-effect:hover {
color: #F6F6F6;
transition: all 0.8s ease;
} }
a:link { a:link {
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
color: #F6F6F6; color: #F6F6F6;
margin: 0;
padding: 0;
} }
a:visited { a:visited {
outline: 0; outline: 0;
color: #F6F6F6; color: #F6F6F6;
} margin: 0;
padding: 0;
ul li ul a {
font-size: var(--small-size);
} }
b { b {
font-family: 'Montserrat', sans-serif; font-family: var(--head-font);
font-weight: 800; font-weight: 800;
} }
@ -92,31 +66,28 @@ b {
/*-------------------------------------*/ /*-------------------------------------*/
/* HEADER -----------------------------*/ /* HEADER -----------------------------*/
#header { #header {
display: flex; position: fixed;
justify-content: space-between; top: 0;
flex-wrap: wrap; left: 0;
order: 1; right: 0;
width: 100%; background-color: #272E36;
margin-left: var(--side-margin);
margin-right: var(--side-margin);
background-color: rgba(0, 0, 0, 0.40);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
padding: var(--medium-size) var(--unit-size) var(--medium-size) var(--unit-size);
} }
#top { #top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
vertical-align: top;
flex-wrap: wrap; flex-wrap: wrap;
order: 1;
width: 100%; width: 100%;
padding: var(--unit-size) var(--unit-size) var(--small-size) var(--unit-size); align-items: center;
} }
/* MENU -------------------------------*/ /* MENU -------------------------------*/
.icon-menu { .icon-menu {
margin: 0;
padding: 0;
display: inline-block; display: inline-block;
vertical-align: top;
width: var(--unit-size); width: var(--unit-size);
height: var(--unit-size); height: var(--unit-size);
stroke-width: 0; stroke-width: 0;
@ -137,8 +108,9 @@ b {
} }
.icon-logo { .icon-logo {
margin: 0;
padding: 0;
display: inline-block; display: inline-block;
vertical-align: top;
width: var(--unit-size); width: var(--unit-size);
height: var(--unit-size); height: var(--unit-size);
stroke-width: 0; stroke-width: 0;
@ -153,8 +125,9 @@ b {
} }
.icon-search { .icon-search {
margin: 0;
padding: 0;
display: inline-block; display: inline-block;
vertical-align: top;
width: var(--unit-size); width: var(--unit-size);
height: var(--unit-size); height: var(--unit-size);
stroke-width: 0; stroke-width: 0;
@ -162,64 +135,44 @@ b {
fill: currentColor; fill: currentColor;
} }
/*-------------------------------------*/
/* PROFILE ----------------------------*/ .navbar {
#cover { width: var(--nav-size);
display: flex; height: calc(100vh - (3 * var(--unit-size)));
justify-content: start; position: fixed;
align-items: center; background-color: rgba(0, 0, 0, 0.40);
order: 3; margin-top: calc(2 * var(--medium-size) + var(--main-size));
width: 100%;
} }
#cover-img { .nav-item a {
width: 100%;
height: auto;
}
#avatar {
z-index: 1;
position: absolute;
width: 4em;
height: 4em;
margin-left: var(--unit-size);
}
#profile {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
padding: var(--medium-size) var(--medium-size);
order: 4;
font-size: var(--medium-size);
align-items: center;
}
#info {
order: 1;
display: flex;
justify-content: flex-start;
}
#tags {
color: #91B9D0; color: #91B9D0;
}
#tags i {
margin-left: var(--small-size);
}
#stats {
margin-left: auto;
order: 2;
display: flex;
justify-content: flex-end;
}
#stats b:last-child {
margin-left: var(--unit-size); margin-left: var(--unit-size);
font-size: var(--medium-size);
} }
/*-------------------------------------*/ .nav-item a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
label {
display: block;
cursor: pointer
}
.navbar {
width: 100%;
display: none;
}
.navbar a {
display: block;
}
#toggle {
display: none;
}
#toggle:checked+.navbar {
display: block;
}

43
public/assets/css/faq/faq.css
View File

@ -1,18 +1,26 @@
/*-------------------------------------*/ /*-------------------------------------*/
/* PAGES ------------------------------*/ /* PAGES ------------------------------*/
.content {
display: flex;
flex-wrap: wrap;
margin-top: 5em;
justify-content: center;
align-items: center;
margin-left: calc(var(--nav-size) + var(--side-margin));
margin-right: var(--side-margin);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
.faq-nav { .faq-nav {
order: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
order: 2;
width: 100%; width: 100%;
margin-left: var(--side-margin);
margin-right: var(--side-margin);
background-color: #00000080; background-color: #00000080;
padding: var(--medium-size) var(--medium-size); padding: var(--medium-size) var(--medium-size);
font-size: var(--medium-size); font-size: var(--medium-size);
font-family: var(--head-font); font-family: var(--head-font);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
} }
.faq-nav ul { .faq-nav ul {
@ -43,28 +51,11 @@
.faq-nav a:hover { .faq-nav a:hover {
color: #F6F6F6; color: #F6F6F6;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
/*-------------------------------------*/ .markd {
/*-------------------------------------*/ order: 2;
/* CONTENT ----------------------------*/ background-color: #00000040;
.content { font-size: var(--medium-size);
order: 3; padding: var(--unit-size);
width: 100%;
margin-top: var(--unit-size);
margin-bottom: var(--unit-size);
margin-left: var(--side-margin);
margin-right: var(--side-margin);
background-color: rgba(0, 0, 0, 0.40);
padding: 0 var(--unit-size) var(--unit-size) var(--unit-size);
border-radius: var(--unit-size);
font-size: var(--small-size);
box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
}
.content ul {
margin: 0;
padding-left: calc(var(--unit-size) * 2);
list-style: disc;
} }

59
templates/base.html.twig
View File

@ -52,57 +52,24 @@
{% block header %} {% block header %}
<div id='header'> <div id='header'>
<div id='top'> <div id='top'>
<nav class='drop-down' id='menu'> <div>
<ul> <label for="toggle" id='menu'>
<li> <svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
<a href="#" class='hover-effect'> </label>
<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg> <input type="checkbox" id="toggle" class='visually-hidden'>
</a> <div class='navbar'>
<ul> <a href='#'>Bookmarks</a>
<li><a>Main Page</a></li> <a href='#'>Happenings</a>
<li><a>Social</a></li> <a href='#'>Messages</a>
<li><a>Bookmarks</a></li> </div>
<li><a>Messages</a></li> </div>
<li><a>Settings</a></li>
<li><a>Logout</a></li>
</ul>
</li>
</ul>
</nav>
<nav id='instance'> <nav id='instance'>
<a href="#" class='hover-effect'> <a href="#">
<svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg> <svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg>
<b>GNU social</b> <b>GNU social</b>
</a> </a>
</nav> </nav>
<div id='search'> <svg id='search' class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
</div>
</div>
<div id='cover'>
<img id="cover-img" src="{{ asset('assets/bitmap.png') }}">
<svg id="avatar"><use xlink:href="#icon-avatar"></use></svg>
</div>
<div id='profile'>
<div id='info'>
<div id='nick'>
<b id='name'>someone</b>
</div>
<div id='tags'>
<i>coffee addict</i>
<i>lazy</i>
</div>
</div>
<div id='stats'>
<div id='followers'>
<b>1337</b> Followers
</div>
<div id='following'>
<b>42</b> Following
</div>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

70
templates/faq/faq.html.twig
View File

@ -4,47 +4,47 @@
{% block header %}{{ parent() }}{% endblock %} {% block header %}{{ parent() }}{% endblock %}
{% block nav %}
<nav class='faq-nav'>
<ul>
<li>
<a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_faq' %}active{% endif %}'>FAQ</a>
</li>
<li>
<a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Contact</a>
</li>
<li>
<a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Tags</a>
</li>
<li>
<a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_groups' %}active{% endif %}'>Groups</a>
</li>
<li>
<a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_openid' %}active{% endif %}'>OpenID</a>
</li>
</ul>
</nav>
{% endblock %}
{% block body %} {% block body %}
<div class="content"> <div class='content'>
{% block markdown %} <nav class='faq-nav'>
{% apply markdown_to_html %} <ul>
## What is this site? <li>
This is a social network, running the GNU social software. <a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_faq' %}active{% endif %}'>FAQ</a>
</li>
<li>
<a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Contact</a>
</li>
<li>
<a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Tags</a>
</li>
<li>
<a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_groups' %}active{% endif %}'>Groups</a>
</li>
<li>
<a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_openid' %}active{% endif %}'>OpenID</a>
</li>
</ul>
</nav>
<div class='markd'>
{% block markdown %}
{% apply markdown_to_html %}
## What is this site?
This is a social network, running the GNU social software.
You can use it to make connections between friends, family and colleagues -- writing short notices about yourself, where you are, and what you're doing, and those notices will be sent to all your contacts. You can use it to make connections between friends, family and colleagues -- writing short notices about yourself, where you are, and what you're doing, and those notices will be sent to all your contacts.
In the future, we'll be adding support for photo, video and file sharing, as well as events, better contact management and mobile devices. In the future, we'll be adding support for photo, video and file sharing, as well as events, better contact management and mobile devices.
## Help ## Help
GNU social is a **social service**. Users can post short status messages which are shared to their friends and colleagues on the service and (optionally) onto the Web. GNU social is a **social service**. Users can post short status messages which are shared to their friends and colleagues on the service and (optionally) onto the Web.
You can also share other types of data, like bookmarks, event invitations, polls, and questions. You can also share other types of data, like bookmarks, event invitations, polls, and questions.
If you'd like to try it out, first register a new account. Then, on the public timeline, enter your message into the textbox at the top of the page, and click "Send". It will go out on the public timeline and to anyone who is subscribed to your notices. If you'd like to try it out, first register a new account. Then, on the public timeline, enter your message into the textbox at the top of the page, and click "Send". It will go out on the public timeline and to anyone who is subscribed to your notices.
To subscribe to other people's notifications, go to their profile page and click the "subscribe" button. They'll get a notice that you're now subscribed to their notifications. To subscribe to other people's notifications, go to their profile page and click the "subscribe" button. They'll get a notice that you're now subscribed to their notifications.
{% endapply %} {% endapply %}
{% endblock %} {% endblock %}
</div>
</div> </div>
{% endblock %} {% endblock %}