[UI][ROUTES] Better use of icons, fixing static pages routing.
This commit is contained in:
rainydaysavings
parent
1989cb481a
commit
02ddf96371
GPG Key ID:
7D0C7EAFC9D835A0
@ -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.
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 778 B After Width: | Height: | Size: 778 B |
5
public/assets/icons/avatar.svg
Normal file
5
public/assets/icons/avatar.svg
Normal 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 |
@ -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>
|
|
||||||
@ -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
|
Before Width: | Height: | Size: 284 B After Width: | Height: | Size: 284 B |
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 725 B After Width: | Height: | Size: 725 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 500 B After Width: | Height: | Size: 500 B |
|
Before Width: | Height: | Size: 763 B After Width: | Height: | Size: 763 B |
File diff suppressed because one or more lines are too long
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -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 |
@ -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;
|
|
||||||
}
|
|
||||||
========================================== */
|
|
||||||
@ -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 |
@ -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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -30,14 +30,31 @@
|
|||||||
|
|
||||||
namespace App\Routes;
|
namespace App\Routes;
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
use App\Controller as C;
|
use App\Controller as C;
|
||||||
use App\Core\Router\RouteLoader;
|
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
|
abstract class Main
|
||||||
{
|
{
|
||||||
public static function load(RouteLoader $r): void
|
public static function load(RouteLoader $r): void
|
||||||
{
|
{
|
||||||
|
<<<<<<< HEAD
|
||||||
$r->connect('main_all', '/main/all', C\NetworkPublic::class);
|
$r->connect('main_all', '/main/all', C\NetworkPublic::class);
|
||||||
$r->connect('config_admin', '/config/admin', C\AdminConfigController::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
@ -10,62 +10,6 @@
|
|||||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base_small.css') }}" media="screen and (max-width: 600px)">
|
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base_small.css') }}" media="screen and (max-width: 600px)">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block header %}
|
{% block header %}{{ parent() }}{% endblock %}
|
||||||
<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 javascripts %}{% endblock %}
|
{% block javascripts %}{% endblock %}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user