mirror of
https://github.com/YunoHost/SSOwat.git
synced 2024-09-03 20:06:27 +02:00
Rename css/js files for semantic + explain their purpose
This commit is contained in:
Alexandre Aubin
parent
67e253211c
commit
0c377c3363
8 changed files with 42 additions and 172 deletions
|
|
@ -328,8 +328,8 @@ end
|
|||
|
||||
if hlp.is_logged_in() then
|
||||
-- serve ynhpanel files
|
||||
serveAsset("/ynhpanel.js", "js/ynhpanel.js")
|
||||
serveAsset("/ynhpanel.css", "css/ynhpanel.css")
|
||||
serveAsset("/ynh_portal.js", "js/ynh_portal.js")
|
||||
serveAsset("/ynh_overlay.css", "css/ynh_overlay.css")
|
||||
-- serve theme's files
|
||||
-- TODO : don't forget to open a PR to enable access to those
|
||||
-- in yunohost_panel.conf.inc
|
||||
|
|
|
|||
|
|
@ -1,3 +1,17 @@
|
|||
/*
|
||||
===============================================================================
|
||||
This file contains CSS rules loaded on all apps page (*if* the app nginx's
|
||||
conf does include the appropriate snippet) for the small YunoHost button in
|
||||
bottom-right corner + portal overlay.
|
||||
|
||||
The yunohost button corresponds to : #ynh-overlay-switch
|
||||
The yunohost portal overlay / iframe corresponds to : #ynh-overlay
|
||||
|
||||
BE CAREFUL that you should *not* add too-general rules that apply to
|
||||
non-yunohost elements (for instance all 'a' or 'p' elements...) as it will
|
||||
likely break app's rendering
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
/* ******************************************************************
|
||||
General
|
||||
|
|
@ -1,3 +1,9 @@
|
|||
/*
|
||||
===============================================================================
|
||||
This file contain CSS rules loaded on the YunoHost user portal.
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
0 = Fonts
|
||||
1 = Global
|
||||
|
|
@ -1,9 +1,18 @@
|
|||
/* ----------------------------------------------------------
|
||||
Utilities
|
||||
---------------------------------------------------------- */
|
||||
/*
|
||||
===============================================================================
|
||||
This JS file is loaded :
|
||||
- in the YunoHost user portal
|
||||
- on every app page if the app nginx's conf does include the ynh snippet
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
/* Console log fix
|
||||
-------------------------- */
|
||||
/*
|
||||
=====================
|
||||
Utilities
|
||||
=====================
|
||||
*/
|
||||
|
||||
/* Console log fix */
|
||||
if (typeof(console) === 'undefined') {
|
||||
var console = {};
|
||||
console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {};
|
||||
|
|
@ -220,7 +229,7 @@ window.addEvent(document, 'DOMContentLoaded', function() {
|
|||
});
|
||||
|
||||
//
|
||||
// This function is called when ynhpanel.js is included in an app
|
||||
// This function is called when ynh_portal.js is included in an app
|
||||
//
|
||||
// It will create the small yunohost "portal button" usually in the bottom
|
||||
// right corner and initialize the portal overlay, shown when clicking the
|
||||
|
|
@ -308,7 +317,7 @@ function init_portal()
|
|||
Array.each(document.getElementsByClassName("app-tile"), function(el) {
|
||||
// Set first-letter data attribute.
|
||||
el.querySelector('.first-letter').innerHTML = el.getAttribute("data-appname").substring(0, 2);
|
||||
// handle app links so they work both in plain info page and in the info iframe called from ynhpanel.js
|
||||
// handle app links so they work both in plain info page and in the info iframe called from ynh_portal.js
|
||||
window.addEvent(el, 'click', function(event) {
|
||||
// if asked to open in new tab
|
||||
if (event.ctrlKey || event.shiftKey || event.metaKey
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
/* ==========================================================================
|
||||
Default Theme
|
||||
|
||||
0 = Colors
|
||||
========================================================================== */
|
||||
|
||||
/* ==========================================================================
|
||||
0 = Colors
|
||||
========================================================================== */
|
||||
|
||||
.bluebg {
|
||||
background: #3498DB!important;
|
||||
}
|
||||
.bluebg:hover:after,
|
||||
.bluebg:focus:after,
|
||||
.bluebg:hover:before,
|
||||
.bluebg:focus:before {
|
||||
background: #16527A!important;
|
||||
}
|
||||
|
||||
.purplebg {
|
||||
background: #9B59B6!important;
|
||||
}
|
||||
.purplebg:hover:after,
|
||||
.purplebg:focus:after,
|
||||
.purplebg:hover:before,
|
||||
.purplebg:focus:before {
|
||||
background: #532C64!important;
|
||||
}
|
||||
|
||||
.redbg {
|
||||
background: #E74C3C!important;
|
||||
}
|
||||
.redbg:hover:after,
|
||||
.redbg:focus:after,
|
||||
.redbg:hover:before,
|
||||
.redbg:focus:before {
|
||||
background: #921E12!important;
|
||||
}
|
||||
|
||||
.orangebg {
|
||||
background: #F39C12!important;
|
||||
}
|
||||
.orangebg:hover:after,
|
||||
.orangebg:focus:after,
|
||||
.orangebg:hover:before,
|
||||
.orangebg:focus:before {
|
||||
background: #7F5006!important;
|
||||
}
|
||||
|
||||
.greenbg {
|
||||
background: #2ECC71!important;
|
||||
}
|
||||
.greenbg:hover:after,
|
||||
.greenbg:focus:after,
|
||||
.greenbg:hover:before,
|
||||
.greenbg:focus:before {
|
||||
background: #176437!important;
|
||||
}
|
||||
|
||||
.darkbluebg {
|
||||
background: #34495E!important;
|
||||
}
|
||||
.darkbluebg:hover:after,
|
||||
.darkbluebg:focus:after,
|
||||
.darkbluebg:hover:before,
|
||||
.darkbluebg:focus:before {
|
||||
background: #07090C!important;
|
||||
}
|
||||
|
||||
.lightbluebg {
|
||||
background: #6A93D4!important;
|
||||
}
|
||||
.lightbluebg:hover:after,
|
||||
.lightbluebg:focus:after,
|
||||
.lightbluebg:hover:before,
|
||||
.lightbluebg:focus:before {
|
||||
background: #2B5394!important;
|
||||
}
|
||||
|
||||
.yellowbg {
|
||||
background: #F1C40F!important;
|
||||
}
|
||||
.yellowbg:hover:after,
|
||||
.yellowbg:focus:after,
|
||||
.yellowbg:hover:before,
|
||||
.yellowbg:focus:before {
|
||||
background: #796307!important;
|
||||
}
|
||||
|
||||
|
||||
.lightpinkbg {
|
||||
background: #F76F87!important;
|
||||
}
|
||||
.lightpinkbg:hover:after,
|
||||
.lightpinkbg:focus:after,
|
||||
.lightpinkbg:hover:before,
|
||||
.lightpinkbg:focus:before {
|
||||
background: #DA0C31!important;
|
||||
}
|
||||
|
||||
/* Following colors are not used yet */
|
||||
.pinkbg {
|
||||
background: #D66D92!important;
|
||||
}
|
||||
.pinkbg:hover:after,
|
||||
.pinkbg:focus:after,
|
||||
.pinkbg:hover:before,
|
||||
.pinkbg:focus:before {
|
||||
background: #992B52!important;
|
||||
}
|
||||
|
||||
.turquoisebg {
|
||||
background: #1ABC9C!important;
|
||||
}
|
||||
.turquoisebg:hover:after,
|
||||
.turquoisebg:focus:after,
|
||||
.turquoisebg:hover:before,
|
||||
.turquoisebg:focus:before {
|
||||
background: #0B4C3F!important;
|
||||
}
|
||||
.lightyellow {
|
||||
background: #FFC973!important;
|
||||
}
|
||||
.lightyellow:hover:after,
|
||||
.lightyellow:focus:after,
|
||||
.lightyellow:hover:before,
|
||||
.lightyellow:focus:before {
|
||||
background: #F39500!important;
|
||||
}
|
||||
.lightgreen {
|
||||
background: #B5F36D!important;
|
||||
}
|
||||
.lightgreen:hover:after,
|
||||
.lightgreen:focus:after,
|
||||
.lightgreen:hover:before,
|
||||
.lightgreen:focus:before {
|
||||
background: #77CF11!important;
|
||||
}
|
||||
.purpledarkbg {
|
||||
background: #8E44AD!important;
|
||||
}
|
||||
.purpledarkbg:hover:after,
|
||||
.purpledarkbg:focus:after,
|
||||
.purpledarkbg:hover:before,
|
||||
.purpledarkbg:focus:before {
|
||||
background: #432051!important;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
var app_tile_colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg','darkbluebg','purpledarkbg','yellowbg','lightpinkbg','pinkbg','turquoisebg','yellowbg','lightbluebg','purpledarkbg', 'bluebg'];
|
||||
|
||||
function set_app_tile_style(el)
|
||||
{
|
||||
// Select a color value from the App label
|
||||
randomColorNumber = parseInt(el.textContent, 36) % app_tile_colors.length;
|
||||
// Add color class.
|
||||
el.classList.add(app_tile_colors[randomColorNumber]);
|
||||
}
|
||||
|
||||
Array.each(document.getElementsByClassName("app-tile"), set_app_tile_style);
|
||||
|
|
@ -10,9 +10,9 @@
|
|||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/ynhpanel.js"></script>
|
||||
<script src="assets/js/ynh_portal.js"></script>
|
||||
{{#theme}}
|
||||
<script src="assets/themes/{{theme}}/custom.js"></script>
|
||||
<script src="assets/themes/{{theme}}/custom_portal.js"></script>
|
||||
{{/theme}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="assets/css/ynh-style.css">
|
||||
<link rel="stylesheet" href="assets/themes/{{theme}}/custom.css">
|
||||
<link rel="stylesheet" href="assets/css/ynh_portal.css">
|
||||
<link rel="stylesheet" href="assets/themes/{{theme}}/custom_portal.css">
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="shortcut icon" href="assets/icons/favicon.ico">
|
||||
|
|
|
|||
Loading…
Reference in a new issue