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

[UI] Side panel animation added

This commit is contained in:
rainydaysavings 2020-07-19 11:44:44 +01:00 committed by Hugo Sales
parent 22042a8cb7
commit 19a96539aa
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
10 changed files with 174 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,8 +39,6 @@ a:link {
text-decoration: none;
outline: 0;
color: #F6F6F6;
margin: 0;
padding: 0;
}
a:visited {
@ -50,6 +48,12 @@ a:visited {
padding: 0;
}
a {
display: inline-block;
margin: 0;
padding: 0;
}
b {
font-family: var(--head-font);
font-weight: 800;
@ -70,7 +74,7 @@ b {
right: 0;
background-color: #272E36;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
padding: var(--medium-size) var(--unit-size) var(--medium-size) var(--unit-size);
padding: var(--unit-size);
}
#top {
@ -94,6 +98,7 @@ b {
#instance {
order: 1;
}
#instance b {
@ -119,14 +124,11 @@ b {
#search {
order: 3;
width: var(--unit-size);
height: var(--unit-size);
}
.icon-search {
margin: 0;
padding: 0;
display: inline-block;
width: var(--unit-size);
height: var(--unit-size);
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
@ -139,7 +141,7 @@ b {
height: calc(100vh - (3 * var(--unit-size)));
position: fixed;
background-color: rgba(0, 0, 0, 0.40);
margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
margin-top: calc(2 * var(--unit-size) + var(--main-size) + 0.15em);
}
.navbar {

54
public/assets/css/base_mid.css
View File

@ -66,7 +66,7 @@ b {
right: 0;
background-color: #272E36;
box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
padding: var(--medium-size) var(--unit-size) var(--medium-size) var(--unit-size);
padding: var(--medium-size);
}
#top {
@ -77,14 +77,45 @@ b {
}
.icon-menu {
margin: 0;
padding: 0;
display: inline-block;
position: relative;
display: flex;
align-items: center;
width: var(--unit-size);
height: var(--unit-size);
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
cursor: pointer;
transition: all .5s ease-in-out;
background-color: #272E36;
}
.icon-menu label {
width: var(--unit-size);
height: 2px;
background: #F6F6F6;
transition: all .5s ease-in-out;
z-index: 1;
}
.icon-menu label::before,
.icon-menu label::after {
content: '';
position: absolute;
width: var(--unit-size);
height: 2px;
background: #F6F6F6;
transition: all .5s ease-in-out;
}
.icon-menu label::before {
transform: translateY(-6px);
}
.icon-menu label::after {
transform: translateY(6px);
}
#toggle:checked+div label{
width: 0px;
}
#toggle:checked+div label::before {
transform: rotate(45deg);
}
#toggle:checked+div label::after {
transform: rotate(-45deg);
}
#instance {
@ -170,10 +201,15 @@ label {
}
#toggle {
display: none;
position: absolute;
z-index: 2;
cursor: pointer;
width: var(--unit-size);
height: var(--unit-size);
opacity: 0;
}
#toggle:checked+.navbar {
#toggle:checked~.navbar {
display: block;
left: 0;
top: 0;

52
public/assets/css/base_small.css
View File

@ -77,14 +77,45 @@ b {
}
.icon-menu {
margin: 0;
padding: 0;
display: inline-block;
position: relative;
display: flex;
align-items: center;
width: var(--unit-size);
height: var(--unit-size);
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
cursor: pointer;
transition: all .5s ease-in-out;
background-color: #272E36;
}
.icon-menu label {
width: var(--unit-size);
height: 2px;
background: #F6F6F6;
transition: all .5s ease-in-out;
z-index: 1;
}
.icon-menu label::before,
.icon-menu label::after {
content: '';
position: absolute;
width: var(--unit-size);
height: 2px;
background: #F6F6F6;
transition: all .5s ease-in-out;
}
.icon-menu label::before {
transform: translateY(-6px);
}
.icon-menu label::after {
transform: translateY(6px);
}
#toggle:checked+div label{
width: 0px;
}
#toggle:checked+div label::before {
transform: rotate(45deg);
}
#toggle:checked+div label::after {
transform: rotate(-45deg);
}
#instance {
@ -170,10 +201,15 @@ label {
}
#toggle {
display: none;
position: absolute;
z-index: 2;
cursor: pointer;
width: var(--unit-size);
height: var(--unit-size);
opacity: 0;
}
#toggle:checked+.navbar {
#toggle:checked~.navbar {
display: block;
left: 0;
top: 0;

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

@ -1,7 +1,7 @@
.content {
display: flex;
flex-wrap: wrap;
margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
margin-top: calc(2 * var(--unit-size) + var(--main-size) + 0.15em);
;
justify-content: center;
align-items: center;
@ -61,4 +61,4 @@
padding: calc(3*var(--unit-size));
padding-top: var(--unit-size);
height: 100%;
}
}

8
templates/base.html.twig
View File

@ -54,12 +54,10 @@
<div id='header'>
<div id='top'>
<div id='left-panel'>
<label for="toggle" id='menu'>
<svg class="icon icon-menu">
<use xlink:href="#icon-menu"></use>
</svg>
</label>
<input type="checkbox" id="toggle">
<div class="icon-menu">
<label for="toggle" id='menu'></label>
</div>
<div class='navbar'>
<div class='profile'>
<svg class="icon icon-avatar">

12
templates/faq/about.html.twig
View File

@ -1,12 +0,0 @@
{% extends 'faq/faq.html.twig' %}
{% block title %}Help{% endblock %}
{% block body %}
{% 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. In the future, we'll be adding support for photo, video and file sharing, as well as events, better contact management and mobile devices.
{% endapply %}
{% endblock %}
{% endblock %}

36
templates/faq/contact.html.twig
View File

@ -3,12 +3,34 @@
{% block title %}Help{% endblock %}
{% block body %}
<div class='content'>
<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>
<div class="markd">
{% block markdown %}
{% apply markdown_to_html %}
## Bugs If you think you've found a bug in the underlying [GNU social](https://gnu.io/social/) software, or if there's a new feature you'd like to see, add it into the [GNU social task list](https://git.gnu.io/gnu/gnu-social/issues). Don't forget to
check the list of existing bugs to make sure it hasn't already been reported! ## Post a notice If you have a question about how to do something, just post a notice with your question, preferrably tagged with #NewHere. Watch your inbox for replies.
{% endapply %}
{% endblock %}
{% block markdown %}
{% apply markdown_to_html %}
## Bugs
If you think you've found a bug in the underlying [GNU social](https://gnu.io/social/) software, or if there's a new feature you'd like to see, add it into the [GNU social task list](https://git.gnu.io/gnu/gnu-social/issues). Don't forget to
check the list of existing bugs to make sure it hasn't already been reported! ## Post a notice If you have a question about how to do something, just post a notice with your question, preferrably tagged with #NewHere. Watch your inbox for replies.
{% endapply %}
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}

26
templates/faq/groups.html.twig
View File

@ -3,10 +3,31 @@
{% block title %}Help{% endblock %}
{% block body %}
<div class='content'>
<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>
<div class="markd">
{% block markdown %}
{% apply markdown_to_html %}
## Groups Users on GNU social can create _groups_ that other users can join. Groups can be a great way to share information and entertainment with a group of people who have a common interest or background; who work together on a team; or who have a
## Groups
Users on GNU social can create _groups_ that other users can join. Groups can be a great way to share information and entertainment with a group of people who have a common interest or background; who work together on a team; or who have a
particular knowledge or skill. You can find out about groups on the server on the Groups page. You can join a group by clicking on the "Join" button either in the group list or on the group's home page. ## Starting a new group You can start a new
group for friends and colleagues. Note that all groups are free for anyone to join. To start a new group, use the **new group** tool and fill out the form. Describe your group as best you can if you want people to be able to find it. When choosing
the nickname for your group, try to keep it short. The nickname is sometimes included in messages to and from the group, so the less chars the better. Try using acronyms for organizations, or airport codes for places (like 'pdx' instead of
@ -17,4 +38,5 @@
{% endapply %}
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}

15
templates/faq/openid.html.twig
View File

@ -7,26 +7,27 @@
<nav class='faq-nav'>
<ul>
<li>
<a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_faq' %}active{% endif %}'="doc_faq' %}active{% endif %}'">FAQ</a>
<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 '="_route') starts with '" doc_contact' %}active{% endif %}'="doc_contact' %}active{% endif %}'">Contact</a>
<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 '="_route') starts with '" doc_tags' %}active{% endif %}'="doc_tags' %}active{% endif %}'">Tags</a>
<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 '="_route') starts with '" doc_groups' %}active{% endif %}'="doc_groups' %}active{% endif %}'">Groups</a>
<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 '="_route') starts with '" doc_openid' %}active{% endif %}'="doc_openid' %}active{% endif %}'">OpenID</a>
<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 %}
## Openid LoadAverage supports the [OpenID](http://openid.net/) standard for single signon between Web sites. OpenID lets you log into many different Web sites without using a different password for each. (See [Wikipedia's OpenID
## Openid
GNU social supports the [OpenID](http://openid.net/) standard for single signon between Web sites. OpenID lets you log into many different Web sites without using a different password for each. (See [Wikipedia's OpenID
article](http://en.wikipedia.org/wiki/OpenID) for more information.) If you already have an account on GNU social, you can **login** with your username and password as usual. To use OpenID in the future, you can **add an OpenID to your account**
after you have logged in normally. There are many [Public OpenID providers](http://wiki.openid.net/OpenID-Providers), and you may already have an OpenID-enabled account on another service. - On wikis: If you have an account on an OpenID-enabled wiki,
like [Wikitravel](http://wikitravel.org/), [wikiHow](http://www.wikihow.com/), [Vinismo](http://vinismo.com/), [AboutUs](http://aboutus.org/) or [Keiki](http://kei.ki/), you can log in to LoadAverage by entering the **full URL** of your user page on
@ -40,4 +41,4 @@
{% endblock %}
</div>
</div>
{% endblock %}
{% endblock %}

15
templates/faq/tags.html.twig
View File

@ -7,26 +7,27 @@
<nav class='faq-nav'>
<ul>
<li>
<a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_faq' %}active{% endif %}'="doc_faq' %}active{% endif %}'">FAQ</a>
<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 '="_route') starts with '" doc_contact' %}active{% endif %}'="doc_contact' %}active{% endif %}'">Contact</a>
<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 '="_route') starts with '" doc_tags' %}active{% endif %}'="doc_tags' %}active{% endif %}'">Tags</a>
<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 '="_route') starts with '" doc_groups' %}active{% endif %}'="doc_groups' %}active{% endif %}'">Groups</a>
<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 '="_route') starts with '" doc_openid' %}active{% endif %}'="doc_openid' %}active{% endif %}'">OpenID</a>
<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 are Tags? GNU social supports [tags](https://en.wikipedia.org/wiki/Tag_(metadata)) to help you organize your activities here. You can use tags for people and for notices. ## Tagging a notice You can tag a notice using a _hashtag_; a #
## What are Tags?
GNU social supports [tags](https://en.wikipedia.org/wiki/Tag_(metadata)) to help you organize your activities here. You can use tags for people and for notices. ## Tagging a notice You can tag a notice using a _hashtag_; a #
character followed by letters and numbers as well as '.', '-', and '_'. Note that accented latin characters are not supported, and non-roman scripts are right out. The HTML for the notice will link to a stream of all the other notices with that tag.
This can be a great way to keep track of a conversation. ## Tagging yourself You can also add tags for yourself on your profile page or by using the edit tags button on your profile page. Use single words to describe yourself, your experiences and
your interest. The tags will become links on your profile page to a list of all the users on the site who use that same tag. It can be a nice way to find people who are related to you geographically or who have a common interest. ## Tagging others
@ -38,4 +39,4 @@
{% endblock %}
</div>
</div>
{% endblock %}
{% endblock %}