[UI][ROUTES] Better use of icons, fixing static pages routing.

This commit is contained in:
rainydaysavings 2020-06-20 22:54:28 +01:00 committed by Hugo Sales
parent 1989cb481a
commit 02ddf96371
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
24 changed files with 89 additions and 1229 deletions

View File

@ -1,15 +0,0 @@
The *SVG* folder contains the icons you selected as separate SVG files.
If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack.
*demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
<svg class="icon icon-drop"><use xlink:href="#icon-drop"></use></svg>
You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
If you prefer to reference an external SVG (containing <defs>) instead of embedding it in HTML, you will need to use *svgxuse.js* in order to support IE 9+. In browsers that don't support referencing external SVGs (such as IE 9), this polyfill sends one HTTP request to fetch and cache all symbol definitions. See *demo-external-svg.html* for this approach. This demo references the *symbol-defs.svg* file and uses the aforementioned polyfill. Note that it must be hosted on a web server to work
properly. Learn more about this polyfill here: https://github.com/Keyamoon/svgxuse
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

View File

Before

Width:  |  Height:  |  Size: 778 B

After

Width:  |  Height:  |  Size: 778 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>avatar</title>
<path opacity="0.992" fill="#fff" d="M31.612 16.632c-0.347 8.622-7.618 15.329-16.241 14.98s-15.331-7.622-14.984-16.245c0.347-8.622 7.618-15.329 16.241-14.98s15.331 7.622 14.984 16.245z"></path>
</svg>

After

Width:  |  Height:  |  Size: 354 B

View File

@ -1,61 +0,0 @@
<!doctype html>
<html>
<head>
<title>IcoMoon - SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo-files/demo.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="bgc1 clearfix">
<div class="mhl">
<p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p><p><strong>Notice</strong>: This demo (along with "symbol-defs.svg" and "svgxuse.js" files) should be <b>hosted on a web server</b> to work properly.</p>
</div>
</header>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 0</h1>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-drop"><use xlink:href="symbol-defs.svg#icon-drop"></use></svg><span class="name"> icon-drop</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-attach"><use xlink:href="symbol-defs.svg#icon-attach"></use></svg><span class="name"> icon-attach</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-heart"><use xlink:href="symbol-defs.svg#icon-heart"></use></svg><span class="name"> icon-heart</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-logo"><use xlink:href="symbol-defs.svg#icon-logo"></use></svg><span class="name"> icon-logo</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-reply"><use xlink:href="symbol-defs.svg#icon-reply"></use></svg><span class="name"> icon-reply</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-menu"><use xlink:href="symbol-defs.svg#icon-menu"></use></svg><span class="name"> icon-menu</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-recycle"><use xlink:href="symbol-defs.svg#icon-recycle"></use></svg><span class="name"> icon-recycle</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-search"><use xlink:href="symbol-defs.svg#icon-search"></use></svg><span class="name"> icon-search</span>
</div>
</div>
</div>
<script defer src="svgxuse.js"></script>
</body>
</html>

View File

@ -1,147 +0,0 @@
body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5;
color: #555;
background: #fff;
}
h1 {
font-size: 1.5em;
font-weight: normal;
box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
}
small {
font-size: .66666667em;
}
a {
color: #e74c3c;
text-decoration: none;
}
a:hover, a:focus {
box-shadow: 0 1px #e74c3c;
}
.bshadow0, input {
box-shadow: inset 0 -2px #e7e7e7;
}
input:hover {
box-shadow: inset 0 -2px #ccc;
}
input, fieldset {
font-size: 1em;
margin: 0;
padding: 0;
border: 0;
}
input {
color: inherit;
line-height: 1.5;
height: 1.5em;
padding: .25em 0;
}
input:focus {
outline: none;
box-shadow: inset 0 -2px #449fdb;
}
.glyph {
font-size: 16px;
margin-right: 1.5em;
float: left;
width: 17em;
}
svg {
color: #000;
}
.liga {
width: 80%;
width: calc(100% - 2.5em);
}
.talign-right {
text-align: right;
}
.talign-center {
text-align: center;
}
.bgc1 {
background: #f1f1f1;
}
.fgc0 {
color: #000;
}
.fgc1 {
color: #999;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
.mvm {
margin-top: .75em;
margin-bottom: .75em;
}
.mtn {
margin-top: 0;
}
.mtl, .mal {
margin-top: 1.5em;
}
.mbl, .mal {
margin-bottom: 1.5em;
}
.mal, .mhl {
margin-left: 1.5em;
margin-right: 1.5em;
}
.mhmm {
margin-left: 1em;
margin-right: 1em;
}
.ptl {
padding-top: 1.5em;
}
.pbs, .pvs {
padding-bottom: .25em;
}
.pvs, .pts {
padding-top: .25em;
}
.unit {
float: left;
}
.unitRight {
float: right;
}
.size1of2 {
width: 50%;
}
.size1of1 {
width: 100%;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.hidden-true {
display: none;
}
.textbox0 {
width: 3em;
background: #f1f1f1;
padding: .25em .5em;
line-height: 1.5;
height: 1.5em;
}
.fs0 {
font-size: 16px;
}
.fs1 {
font-size: 32px;
}
.name {
margin-left: .25em;
}

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 284 B

After

Width:  |  Height:  |  Size: 284 B

View File

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Before

Width:  |  Height:  |  Size: 725 B

After

Width:  |  Height:  |  Size: 725 B

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 500 B

After

Width:  |  Height:  |  Size: 500 B

View File

Before

Width:  |  Height:  |  Size: 763 B

After

Width:  |  Height:  |  Size: 763 B

File diff suppressed because one or more lines are too long

View File

@ -1,46 +0,0 @@
.icon {
display: inline-block;
background-repeat: no-repeat;
background-image: url(sprite.svg);
}
.icon-drop {
width: 32px;
height: 32px;
background-position: 0 0;
}
.icon-attach {
width: 32px;
height: 32px;
background-position: -48px 0;
}
.icon-heart {
width: 32px;
height: 32px;
background-position: -96px 0;
}
.icon-logo {
width: 32px;
height: 32px;
background-position: -144px 0;
}
.icon-reply {
width: 32px;
height: 32px;
background-position: -192px 0;
}
.icon-menu {
width: 32px;
height: 32px;
background-position: -240px 0;
}
.icon-recycle {
width: 32px;
height: 32px;
background-position: -288px 0;
}
.icon-search {
width: 32px;
height: 32px;
background-position: -336px 0;
}

View File

@ -1,104 +0,0 @@
<!doctype html>
<html>
<head>
<title>CSS Sprite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="sprite.css" rel="stylesheet">
</head>
<style>
body {
font-family: sans-serif;
color: #555;
margin: 0;
line-height: 1.5;
}
a, a:visited {
color: #e74c3c;
text-decoration: none;
}
a:hover {
box-shadow: 0 1px;
}
header {
background: #F1F1F1;
}
p {
margin: 1em 0;
}
h1 {
font-size: 1.5em;
font-weight: normal;
margin: 1em 0 .75em;
color: #999;
box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
}
.mhl {
margin-left: 1.5em;
margin-right: 1.5em;
}
.cell {
float: left;
margin-right: 1.5em;
margin-bottom: .25em;
width: 17em;
overflow: hidden;
}
.cell span {
margin-right: .25em;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.fs1 {
font-size: 32px;
}
</style>
<body>
<header class="clearfix">
<p class="mhl">CSS Sprite - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
</header>
<div class="clearfix mhl">
<h1>Grid Size: 0</h1>
<div class="cell fs1">
<span class="icon icon-drop"></span>
icon-drop
</div>
<div class="cell fs1">
<span class="icon icon-attach"></span>
icon-attach
</div>
<div class="cell fs1">
<span class="icon icon-heart"></span>
icon-heart
</div>
<div class="cell fs1">
<span class="icon icon-logo"></span>
icon-logo
</div>
<div class="cell fs1">
<span class="icon icon-reply"></span>
icon-reply
</div>
<div class="cell fs1">
<span class="icon icon-menu"></span>
icon-menu
</div>
<div class="cell fs1">
<span class="icon icon-recycle"></span>
icon-recycle
</div>
<div class="cell fs1">
<span class="icon icon-search"></span>
icon-search
</div>
</div>
</body>
</html>

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,16 +0,0 @@
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
font-size: 32px;
color: red;
}
========================================== */

View File

@ -1,230 +0,0 @@
/*!
* @copyright Copyright (c) 2017 IcoMoon.io
* @license Licensed under MIT license
* See https://github.com/Keyamoon/svgxuse
* @version 1.2.6
*/
/*jslint browser: true */
/*global XDomainRequest, MutationObserver, window */
(function () {
"use strict";
if (typeof window !== "undefined" && window.addEventListener) {
var cache = Object.create(null); // holds xhr objects to prevent multiple requests
var checkUseElems;
var tid; // timeout id
var debouncedCheck = function () {
clearTimeout(tid);
tid = setTimeout(checkUseElems, 100);
};
var unobserveChanges = function () {
return;
};
var observeChanges = function () {
var observer;
window.addEventListener("resize", debouncedCheck, false);
window.addEventListener("orientationchange", debouncedCheck, false);
if (window.MutationObserver) {
observer = new MutationObserver(debouncedCheck);
observer.observe(document.documentElement, {
childList: true,
subtree: true,
attributes: true
});
unobserveChanges = function () {
try {
observer.disconnect();
window.removeEventListener("resize", debouncedCheck, false);
window.removeEventListener("orientationchange", debouncedCheck, false);
} catch (ignore) {}
};
} else {
document.documentElement.addEventListener("DOMSubtreeModified", debouncedCheck, false);
unobserveChanges = function () {
document.documentElement.removeEventListener("DOMSubtreeModified", debouncedCheck, false);
window.removeEventListener("resize", debouncedCheck, false);
window.removeEventListener("orientationchange", debouncedCheck, false);
};
}
};
var createRequest = function (url) {
// In IE 9, cross origin requests can only be sent using XDomainRequest.
// XDomainRequest would fail if CORS headers are not set.
// Therefore, XDomainRequest should only be used with cross origin requests.
function getOrigin(loc) {
var a;
if (loc.protocol !== undefined) {
a = loc;
} else {
a = document.createElement("a");
a.href = loc;
}
return a.protocol.replace(/:/g, "") + a.host;
}
var Request;
var origin;
var origin2;
if (window.XMLHttpRequest) {
Request = new XMLHttpRequest();
origin = getOrigin(location);
origin2 = getOrigin(url);
if (Request.withCredentials === undefined && origin2 !== "" && origin2 !== origin) {
Request = XDomainRequest || undefined;
} else {
Request = XMLHttpRequest;
}
}
return Request;
};
var xlinkNS = "http://www.w3.org/1999/xlink";
checkUseElems = function () {
var base;
var bcr;
var fallback = ""; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
var hash;
var href;
var i;
var inProgressCount = 0;
var isHidden;
var Request;
var url;
var uses;
var xhr;
function observeIfDone() {
// If done with making changes, start watching for chagnes in DOM again
inProgressCount -= 1;
if (inProgressCount === 0) { // if all xhrs were resolved
unobserveChanges(); // make sure to remove old handlers
observeChanges(); // watch for changes to DOM
}
}
function attrUpdateFunc(spec) {
return function () {
if (cache[spec.base] !== true) {
spec.useEl.setAttributeNS(xlinkNS, "xlink:href", "#" + spec.hash);
if (spec.useEl.hasAttribute("href")) {
spec.useEl.setAttribute("href", "#" + spec.hash);
}
}
};
}
function onloadFunc(xhr) {
return function () {
var body = document.body;
var x = document.createElement("x");
var svg;
xhr.onload = null;
x.innerHTML = xhr.responseText;
svg = x.getElementsByTagName("svg")[0];
if (svg) {
svg.setAttribute("aria-hidden", "true");
svg.style.position = "absolute";
svg.style.width = 0;
svg.style.height = 0;
svg.style.overflow = "hidden";
body.insertBefore(svg, body.firstChild);
}
observeIfDone();
};
}
function onErrorTimeout(xhr) {
return function () {
xhr.onerror = null;
xhr.ontimeout = null;
observeIfDone();
};
}
unobserveChanges(); // stop watching for changes to DOM
// find all use elements
uses = document.getElementsByTagName("use");
for (i = 0; i < uses.length; i += 1) {
try {
bcr = uses[i].getBoundingClientRect();
} catch (ignore) {
// failed to get bounding rectangle of the use element
bcr = false;
}
href = uses[i].getAttribute("href")
|| uses[i].getAttributeNS(xlinkNS, "href")
|| uses[i].getAttribute("xlink:href");
if (href && href.split) {
url = href.split("#");
} else {
url = ["", ""];
}
base = url[0];
hash = url[1];
isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;
if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
// the use element is empty
// if there is a reference to an external SVG, try to fetch it
// use the optional fallback URL if there is no reference to an external SVG
if (fallback && !base.length && hash && !document.getElementById(hash)) {
base = fallback;
}
if (uses[i].hasAttribute("href")) {
uses[i].setAttributeNS(xlinkNS, "xlink:href", href);
}
if (base.length) {
// schedule updating xlink:href
xhr = cache[base];
if (xhr !== true) {
// true signifies that prepending the SVG was not required
setTimeout(attrUpdateFunc({
useEl: uses[i],
base: base,
hash: hash
}), 0);
}
if (xhr === undefined) {
Request = createRequest(base);
if (Request !== undefined) {
xhr = new Request();
cache[base] = xhr;
xhr.onload = onloadFunc(xhr);
xhr.onerror = onErrorTimeout(xhr);
xhr.ontimeout = onErrorTimeout(xhr);
xhr.open("GET", base);
xhr.send();
inProgressCount += 1;
}
}
}
} else {
if (!isHidden) {
if (cache[base] === undefined) {
// remember this URL if the use element was not empty and no request was sent
cache[base] = true;
} else if (cache[base].onload) {
// if it turns out that prepending the SVG is not necessary,
// abort the in-progress xhr.
cache[base].abort();
delete cache[base].onload;
cache[base] = true;
}
} else if (base.length && cache[base]) {
setTimeout(attrUpdateFunc({
useEl: uses[i],
base: base,
hash: hash
}), 0);
}
}
}
uses = "";
inProgressCount += 1;
observeIfDone();
};
var winLoad;
winLoad = function () {
window.removeEventListener("load", winLoad, false); // to prevent memory leaks
tid = setTimeout(checkUseElems, 0);
};
if (document.readyState !== "complete") {
// The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
window.addEventListener("load", winLoad, false);
} else {
// No need to add a listener if the document is already loaded, initialize immediately.
winLoad();
}
}
}());

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,101 +0,0 @@
<?php
// {{{ License
// This file is part of GNU social - https://www.gnu.org/software/social
//
// GNU social is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// GNU social is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with GNU social. If not, see <http://www.gnu.org/licenses/>.
// }}}
/**
* FAQ main page
*
* @package GNUsocial
* @category Controller
*
* @author Eliseu Amaro <eliseu@fc.up.pt>
* @copyright 2020 Free Software Foundation, Inc http://www.fsf.org
* @license https://www.gnu.org/licenses/agpl.html GNU AGPL v3 or later
*/
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
class FaqHome extends AbstractController
{
/**
* @Route("/doc/faq", name="doc_faq")
*/
public function home()
{
return $this->render('faq/home.html.twig');
}
/**
* @Route("/doc/help", name="doc_help")
*/
public function help()
{
return $this->render('faq/help.html.twig');
}
/**
* @Route("/doc/about", name="doc_about")
*/
public function about()
{
return $this->render('faq/about.html.twig');
}
/**
* @Route("/doc/contact", name="doc_contact")
*/
public function contact()
{
return $this->render('faq/contact.html.twig');
}
/**
* @Route("/doc/tags", name="doc_tags")
*/
public function tags()
{
return $this->render('faq/tags.html.twig');
}
/**
* @Route("/doc/groups", name="doc_groups")
*/
public function groups()
{
return $this->render('faq/groups.html.twig');
}
/**
* @Route("/doc/api", name="doc_api")
*/
public function api()
{
return $this->render('faq/api.html.twig');
}
/**
* @Route("/doc/openid", name="doc_openid")
*/
public function openid()
{
return $this->render('faq/openid.html.twig');
}
}

View File

@ -30,14 +30,31 @@
namespace App\Routes;
<<<<<<< HEAD
use App\Controller as C;
use App\Core\Router\RouteLoader;
=======
use App\Controller\NetworkPublic;
use App\Core\RouteLoader;
use Symfony\Bundle\FrameworkBundle\Controller\TemplateController;
>>>>>>> 5734468448... [UI] Better use of icons, fixing static pages routing.
abstract class Main
{
public static function load(RouteLoader $r): void
{
<<<<<<< HEAD
$r->connect('main_all', '/main/all', C\NetworkPublic::class);
$r->connect('config_admin', '/config/admin', C\AdminConfigController::class);
=======
$r->connect('main_all', '/main/all', NetworkPublic::class);
// FAQ pages, still need to make sure no path traversal attacks or sql and stuff
$r->connect('doc_faq', '/doc/faq', TemplateController::class, [], ['defaults' => ['template' => 'faq/home.html.twig']]);
$r->connect('doc_contact', '/doc/contact', TemplateController::class, [], ['defaults' => ['template' => 'faq/contact.html.twig']]);
$r->connect('doc_tags', '/doc/tags', TemplateController::class, [], ['defaults' => ['template' => 'faq/tags.html.twig']]);
$r->connect('doc_groups', '/doc/groups', TemplateController::class, [], ['defaults' => ['template' => 'faq/groups.html.twig']]);
$r->connect('doc_openid', '/doc/openid', TemplateController::class, [], ['defaults' => ['template' => 'faq/openid.html.twig']]);
>>>>>>> 5734468448... [UI] Better use of icons, fixing static pages routing.
}
}

File diff suppressed because one or more lines are too long

View File

@ -10,62 +10,6 @@
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base_small.css') }}" media="screen and (max-width: 600px)">
{% endblock %}
{% block header %}
<div id='header'>
<nav class='drop-down' id='menu'>
<ul>
<li>
<a href="#" class='hover-effect'>
<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
</a>
<ul>
<li><a>Bookmarks</a></li>
<li><a>Messages</a></li>
<li><a>Settings</a></li>
<li><a>Logout</a></li>
</ul>
</li>
</ul>
</nav>
<nav class='drop-down' id='instance'>
<ul>
<li>
<a href="#" class='hover-effect'>
<svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg>
<b id='instance-name'>GNU social</b>
<svg class="icon icon-drop"><use xlink:href="#icon-drop"></use></svg>
</a>
<ul>
<li><a>Main Page</a></li>
</ul>
</li>
</ul>
</nav>
<div class='flex-item' id='search'>
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
</div>
<div id='profile'>
<svg class="icon icon-avatar"><use xlink:href="#icon-avatar"></use></svg>
<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>
{% endblock %}
{% block header %}{{ parent() }}{% endblock %}
{% block javascripts %}{% endblock %}