From 727083ec88043304c4a392927f89b2982728c152 Mon Sep 17 00:00:00 2001 From: rainydaysavings Date: Sun, 14 Jun 2020 23:34:14 +0100 Subject: [PATCH] [UI][Mobile][FAQ] FAQ polish, better use of twig, responsive css. --- public/assets/css/faq/base.css | 8 +- public/assets/css/faq/base_mid.css | 284 +++++++++++++++++++++++++++ public/assets/css/faq/base_small.css | 23 +-- templates/base.html.twig | 2 + templates/faq/about.html.twig | 41 +--- templates/faq/api.html.twig | 45 +---- templates/faq/base.html.twig | 21 +- templates/faq/contact.html.twig | 51 +---- templates/faq/groups.html.twig | 67 +------ templates/faq/help.html.twig | 44 +---- templates/faq/home.html.twig | 34 ++-- templates/faq/openid.html.twig | 48 +---- templates/faq/tags.html.twig | 59 +----- 13 files changed, 380 insertions(+), 347 deletions(-) create mode 100644 public/assets/css/faq/base_mid.css diff --git a/public/assets/css/faq/base.css b/public/assets/css/faq/base.css index 350d935029..930d26b962 100644 --- a/public/assets/css/faq/base.css +++ b/public/assets/css/faq/base.css @@ -188,8 +188,10 @@ b } #stats { - order: 3; margin-left: auto; + order: 3; + display: flex; + justify-content: flex-end; } #stats b:last-child { @@ -218,8 +220,8 @@ b align-items: stretch; justify-content: space-between; width: 100%; - margin-left: 15%; - margin-right: 15%; + margin-left: 10%; + margin-right: 10%; padding: 0; } .faq-nav li diff --git a/public/assets/css/faq/base_mid.css b/public/assets/css/faq/base_mid.css new file mode 100644 index 0000000000..dcdd787ffe --- /dev/null +++ b/public/assets/css/faq/base_mid.css @@ -0,0 +1,284 @@ +/* GENERAL ----------------------------*/ +body, html +{ + background-color: #29323c; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); + background-attachment: fixed; + background-size: cover; + color: #F6F6F6; + font-family: 'Open Sans', sans-serif; + font-size: 1.2em; + margin: 0; + padding: 0; +} +ul +{ + text-decoration: none; + margin: 0; + padding: 0; + list-style: none; +} +.drop-down ul li +{ + position: relative; +} +.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 +{ + text-decoration: none; + outline: 0; + color: #F6F6F6; +} +a:visited +{ + outline: 0; + color: #F6F6F6; +} +ul li ul a +{ + font-size: 0.7em; +} +b +{ + font-family: 'Montserrat', sans-serif; + font-weight: 800; +} +/*-------------------------------------*/ +/* CONTAINER --------------------------*/ +#container +{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +/*-------------------------------------*/ +/* HEADER -----------------------------*/ +#header +{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + order: 1; + width: 100%; + margin-left: 10%; + margin-right: 10%; + align-items: center; + + background-color: rgba(0, 0, 0, 0.40);; + padding: 1em 1em; + box-shadow: 0px 0px 60px -20px rgba(41,50,60,1); +} +/* MENU -------------------------------*/ +#menu +{ + order: 1; +} +.icon-menu +{ + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} +/*-------------------------------------*/ +/* INSTANCE ---------------------------*/ +#instance +{ + order: 2; +} +.icon-logo +{ + display: inline-block; + vertical-align: middle; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} +.icon-drop +{ + display: inline-block; + vertical-align: middle; + width: 0.5em; + height: 0.5em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} +/*-------------------------------------*/ +/* SEARCH -----------------------------*/ +#search +{ + order: 3; +} +.icon-search +{ + display: inline-block; + vertical-align: middle; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} +/*-------------------------------------*/ +/* PROFILE ----------------------------*/ +#profile +{ + display: flex; + justify-content: flex-start; + order: 4; + width: 100%; + margin-top: 2em; + font-size: 0.8em; + align-items: center; +} +.icon-avatar +{ + order: 1; + margin-right: 1em; + width: 4em; + height: 4em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} +#info +{ + order: 2; + margin-right: auto; +} +#nick +{ + order: 1; + display: flex; + align-items: center; + margin-right: 1em; +} +#tags +{ + order: 2; + color: #91B9D0; +} +#tags i:last-child +{ + margin-left: 0.5em; +} +#stats +{ + order: 3; + display: flex; + margin-left: auto; + flex-flow: column; +} +#followers +{ + order: 1; + width: 100%; +} +#following +{ + order: 2; + width: 100%; + text-align: right; +} +/*-------------------------------------*/ +/*-------------------------------------*/ +/* PAGES ------------------------------*/ +.faq-nav +{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + order: 2; + width: 100%; + margin-left: 10%; + margin-right: 10%; + background-color: #00000080; + padding: 1em 1em; + font-size: 0.8em; + box-shadow: 0px 0px 60px -20px rgba(41,50,60,1); +} +.faq-nav ul +{ + display: flex; + align-items: stretch; + justify-content: space-between; + width: 100%; + margin-left: 1%; + margin-right: 1%; + padding: 0; +} +.faq-nav li +{ + display: block; + flex: 0 1 auto; + list-style-type: none; +} +.active +{ + color: #F6F6F6 !important; + font-weight: 700; +} +.faq-nav a +{ + color: #91B9D0; +} +.faq-nav a:hover +{ + color: #F6F6F6; + transition: all 0.8s ease; + +} +/*-------------------------------------*/ +/*-------------------------------------*/ +/* CONTENT ----------------------------*/ +.content +{ + order: 3; + width: 100%; + margin-top: 1em; + margin-bottom: 1em; + margin-left: 10%; + margin-right: 10%; + background-color: rgba(0, 0, 0, 0.40); + padding: 0 1em 1em 1em; + border-radius: 1em; + font-size: 0.7em; + box-shadow: 0px 0px 60px -20px rgba(41,50,60,1); +} +.content ul +{ + margin: 0; + padding-left: 2em; + list-style: disc; +} \ No newline at end of file diff --git a/public/assets/css/faq/base_small.css b/public/assets/css/faq/base_small.css index ecebca7032..dd7b557b03 100644 --- a/public/assets/css/faq/base_small.css +++ b/public/assets/css/faq/base_small.css @@ -7,7 +7,7 @@ body, html background-size: cover; color: #F6F6F6; font-family: 'Open Sans', sans-serif; - font-size: 1.2em; + font-size: 1.1em; margin: 0; padding: 0; } @@ -86,8 +86,8 @@ b flex-wrap: wrap; order: 1; width: 100%; - margin-left: 1%; - margin-right: 1%; + margin-left: 0; + margin-right: 0; align-items: center; background-color: rgba(0, 0, 0, 0.40);; @@ -197,8 +197,8 @@ b { order: 3; display: flex; - justify-content: flex-end; - align-items: flex-end; + margin-left: auto; + flex-flow: column; } #followers { @@ -209,10 +209,7 @@ b { order: 2; width: 100%; -} -#stats b:last-child -{ - margin-left: 1em; + text-align: right; } /*-------------------------------------*/ /*-------------------------------------*/ @@ -224,8 +221,8 @@ b flex-wrap: wrap; order: 2; width: 100%; - margin-left: 1%; - margin-right: 1%; + margin-left: 0; + margin-right: 0; background-color: #00000080; padding: 1em 1em; font-size: 0.7em; @@ -237,8 +234,8 @@ b align-items: stretch; justify-content: space-between; width: 100%; - margin-left: 1%; - margin-right: 1%; + margin-left: 0; + margin-right: 0; padding: 0; } .faq-nav li diff --git a/templates/base.html.twig b/templates/base.html.twig index 64640c66df..25add4c763 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -62,6 +62,8 @@ {% endblock %}
+ {% block header %}{% endblock %} + {% block nav %}{% endblock %} {% block body %}{% endblock %}
diff --git a/templates/faq/about.html.twig b/templates/faq/about.html.twig index 904006482f..6fa67c0f17 100644 --- a/templates/faq/about.html.twig +++ b/templates/faq/about.html.twig @@ -1,45 +1,18 @@ -{% extends 'faq/base.html.twig' %} +{% extends 'faq/home.html.twig' %} {% block title %}Help{% endblock %} {% block body %} - {{ parent() }} - -
+ {% block markdown %} {% apply markdown_to_html %} - ## About + ## What is this site? + This is a social network, running the GNU social software. - GNU social is a social network based on the Free Software [GNU social](https://git.gnu.io/gnu/gnu-social) tool. + 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. - If you [register](https://loadaverage.org/main/register) for an account, you can post small (0 chars or less) text notices about yourself, where you are, what you're doing, or practically anything you want. You can also subscribe to the notices of your friends, or other people you're interested in, and follow them on the Web or in an [RSS](https://en.wikipedia.org/wiki/RSS) feed. + 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 %} \ No newline at end of file diff --git a/templates/faq/api.html.twig b/templates/faq/api.html.twig index 4b6ea7f6b1..6fa67c0f17 100644 --- a/templates/faq/api.html.twig +++ b/templates/faq/api.html.twig @@ -1,49 +1,18 @@ -{% extends 'faq/base.html.twig' %} +{% extends 'faq/home.html.twig' %} {% block title %}Help{% endblock %} {% block body %} - {{ parent() }} - -
+ {% block markdown %} {% apply markdown_to_html %} - ## API - GNU social provides APIs that applications can use to interact with it: + ## What is this site? + This is a social network, running the GNU social software. - - [AtomPub](https://loadaverage.org/doc/atompub) - - [Twitter-compatible API](https://loadaverage.org/doc/twitterapi) + 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. - ### API discovery - - The base URLs for the APIs can be obtained using [Really Simple Discovery](https://en.wikipedia.org/wiki/Really_Simple_Discovery). + 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 %} \ No newline at end of file diff --git a/templates/faq/base.html.twig b/templates/faq/base.html.twig index 3dff7bc831..74457f902d 100644 --- a/templates/faq/base.html.twig +++ b/templates/faq/base.html.twig @@ -1,15 +1,16 @@ {% extends 'base.html.twig' %} -{% block meta %}{% endblock %} +{% block meta %}{{ parent() }}{% endblock %} {% block title %}{% endblock %} {% block stylesheets %} - - + + + {% endblock %} -{% block body %} +{% block header %}