From 03f9a7c0a031b5246df4436bf53136d2e48a557f Mon Sep 17 00:00:00 2001
From: ulrich <not disclosed>
Date: Sun, 07 Jan 2018 14:25:44 +0000
Subject: [PATCH] Hamburger-Icon gewechselt und Menue-Steuerung daran angepasst.
---
app.js | 28 ++++++--
hamburger.css | 100 +++++++++++++++++++++++++++++++++
index.html | 8 ++
app.css | 11 +++
README.md | 1
5 files changed, 135 insertions(+), 13 deletions(-)
diff --git a/README.md b/README.md
index 1068ba9..ad414a9 100644
--- a/README.md
+++ b/README.md
@@ -93,7 +93,6 @@
Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden.
````
-<link rel="stylesheet" type="text/css" href="../jslib/app-menu/nav-toggle.css">
<link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css">
<script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script src="../jslib/mustache/mustache.min.js"></script>
diff --git a/app.css b/app.css
index d8a2e27..d9afd2b 100644
--- a/app.css
+++ b/app.css
@@ -10,7 +10,8 @@
margin: 0;
padding: 0;
height: 100%; /* Anmerkung 2 */
- font-size: initial;
+ font-size: large;
+ /* font-size: initial; */
/* font-size: 1.5em; */ /* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
@@ -32,6 +33,7 @@
display: flex;
flex-flow: row;
height: 2em;
+ align-items: center;
}
.sued {
background-color: lightgray;
@@ -69,8 +71,13 @@
/* app-layout ende */
+#nav-menu {
+ /* padding-top: 0.5em;*/
+ width: 2em;
+}
+
#app-titel {
- padding-left: 2em;
+ /* padding-left: 2em; */
}
.pointer-cursor {
diff --git a/app.js b/app.js
index 9b474b8..b8e9d84 100644
--- a/app.js
+++ b/app.js
@@ -31,6 +31,12 @@
app_get_template('data/tpl/dlg-sender-edit-form.tpl', TPL_SENDER_EDIT_FORM);
app_get_template('data/tpl/kachel.tpl', TPL_SENDER_KACHEL);
app_get_template('data/tpl/abspieler.tpl', TPL_ABSPIELER);
+
+ var $hamburger = $(".hamburger");
+ $hamburger.on("click", function(e) {
+ app_menue_umschalten();
+ });
+
$(".sendersuche-eingabe").on('keyup', function() {
clearTimeout(suchTimeout);
suchTimeout = setTimeout('app_sendersuche()', 500);
@@ -52,6 +58,12 @@
'Suchbegriff: ' + suchbegriff,
1500
);
+}
+
+function app_menue_umschalten() {
+ var $hamburger = $(".hamburger");
+ $hamburger.toggleClass("is-active"); // hamburger-icon umschalten
+ app_menu_toggle(); // menue oeffnen/schliessen
}
/* Senderliste */
@@ -108,12 +120,12 @@
function app_nachricht_test() {
app_dialog_laden_und_zeigen(
templateCache[TPL_DLG_MSG], 'data/msg-test.json');
- app_menu_toggle();
+ app_menue_umschalten();
}
function app_info_dialog_zeigen() {
app_dialog_laden_und_zeigen(templateCache[TPL_DLG_INFO], '');
- app_menu_toggle();
+ app_menue_umschalten();
}
function app_neuer_sender() {
@@ -124,31 +136,31 @@
app_dialog_schliessen();
app_meldung_mit_timeout('Speichern gewaehlt', 1500);
});
- app_menu_toggle();
+ app_menue_umschalten();
}
function app_sender_bearbeiten() {
senderKlickModus = "2"; // bearbeiten
app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_EDIT], '');
- app_menu_toggle();
+ app_menue_umschalten();
}
function app_sender_loeschen() {
app_meldung_mit_timeout('Nicht implementiert: Sender loeschen.', 1500);
- app_menu_toggle();
+ app_menue_umschalten();
}
function app_abspieler_loeschen() {
app_meldung_mit_timeout('Nicht implementiert: Abspieler loeschen.', 1500);
- app_menu_toggle();
+ app_menue_umschalten();
}
function app_neuer_abspieler() {
app_meldung_mit_timeout('Nicht implementiert: Neuer Abspieler.', 1500);
- app_menu_toggle();
+ app_menue_umschalten();
}
function app_abspieler_bearbeiten() {
app_meldung_mit_timeout('Nicht implementiert: Abspieler bearbeiten.', 1500);
- app_menu_toggle();
+ app_menue_umschalten();
}
/* --- Dialogfunktionen --- */
diff --git a/hamburger.css b/hamburger.css
new file mode 100644
index 0000000..789ec63
--- /dev/null
+++ b/hamburger.css
@@ -0,0 +1,100 @@
+/*!
+ * entnommen aus
+ *
+ * Hamburgers
+ * @description Tasty CSS-animated hamburgers
+ * @author Jonathan Suh @jonsuh
+ * @site https://jonsuh.com/hamburgers
+ * @link https://github.com/jonsuh/hamburgers
+ */
+
+.hamburger {
+ padding: 15px 15px;
+ display: inline-block;
+ cursor: pointer;
+ transition-property: opacity, filter;
+ transition-duration: 0.15s;
+ transition-timing-function: linear;
+ font: inherit;
+ color: inherit;
+ text-transform: none;
+ background-color: transparent;
+ border: 0;
+ margin: 0;
+ overflow: visible;
+}
+
+.hamburger:hover {
+ opacity: 0.7;
+}
+
+.hamburger-box {
+ width: 40px;
+ height: 24px;
+ display: inline-block;
+ position: relative;
+}
+
+.hamburger-inner {
+ display: block;
+ top: 50%;
+ margin-top: -2px;
+}
+
+.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
+ width: 30px;
+ height: 4px;
+ background-color: #000;
+ border-radius: 4px;
+ position: absolute;
+ transition-property: transform;
+ transition-duration: 0.15s;
+ transition-timing-function: ease;
+}
+
+.hamburger-inner::before, .hamburger-inner::after {
+ content: "";
+ display: block;
+}
+
+.hamburger-inner::before {
+ top: -10px;
+}
+
+.hamburger-inner::after {
+ bottom: -10px;
+}
+
+/*
+ * Elastic
+ */
+.hamburger--elastic .hamburger-inner {
+ top: 2px;
+ transition-duration: 0.275s;
+ transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.hamburger--elastic .hamburger-inner::before {
+ top: 10px;
+ transition: opacity 0.125s 0.275s ease;
+}
+
+.hamburger--elastic .hamburger-inner::after {
+ top: 20px;
+ transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.hamburger--elastic.is-active .hamburger-inner {
+ transform: translate3d(0, 10px, 0) rotate(135deg);
+ transition-delay: 0.075s;
+}
+
+.hamburger--elastic.is-active .hamburger-inner::before {
+ transition-delay: 0s;
+ opacity: 0;
+}
+
+.hamburger--elastic.is-active .hamburger-inner::after {
+ transform: translate3d(0, -20px, 0) rotate(-270deg);
+ transition-delay: 0.075s;
+}
diff --git a/index.html b/index.html
index e255122..fcdb944 100644
--- a/index.html
+++ b/index.html
@@ -4,15 +4,19 @@
<title>Radio-UI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href="../jslib/app-menu/nav-toggle.css">
<link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css">
+ <link rel="stylesheet" type="text/css" href="hamburger.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<!-- Kopfzeile -->
<div class="nord">
<div id="nav-menu">
- <a id="nav-toggle" href="#"><span></span></a>
+ <div id="nav-toggle" class="hamburger hamburger--elastic">
+ <div class="hamburger-box">
+ <div class="hamburger-inner"></div>
+ </div>
+ </div>
</div>
<div class="app-titel">
<span id="app-titel">Radio-UI</span>
--
Gitblit v1.9.3