Dialog- und Nachrichtenbereich hinzugefuegt

ulrich

2018-01-03 9f0d54067fefd1d3c9c6babf425d3d3a443eeccc

Dialog- und Nachrichtenbereich hinzugefuegt

 app.css

@@ -1,22 +1,78 @@

/* ehem. app-layout anfang */

html, body {
  font-size: 10pt;
  margin: 0;
  padding: 0;
  height: 100%; /* Anmerkung 2 */
  font-size: initial;
  /* font-size: 1.5em; */   /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  /* font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  font-family: RobotoCondensed;
}

.nord {
body {
  min-height: 0; /* Anmerkung 1 */
  display: flex;
  flex-flow: column;
}
.inhalt {
  display: flex;
  flex-flow: row;
  height: 2em;
  height: 100%; /* Anmerkung 2 */
  min-height: 0; /* Anmerkung 1 */
}

.nord {
  background-color: lightgray;
  display: flex;
  flex-flow: row;
  height: 1.6em;
}
.sued {
  background-color: lightgray;
}
.west {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10em;
  background-color: antiquewhite;
  transition: all 0.3s ease-in;
  overflow: hidden;
  white-space: nowrap;
  background-color: #f7f7f7;
}
.ost {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10em;
  background-color: antiquewhite;
}
/*
.zentrum {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
*/
.zentrum {
  display: flex;
  flex-flow: row;
  overflow-x: hidden;
  margin: 0;
}

/*
  Anmerkungen:
  1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
      http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
  2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
      immer ueber das gesamte Browserfenster ausdehnt.
*/

/* ehem. app-layout ende */



#app-titel {
  padding-left: 2em;
@@ -26,11 +82,36 @@
  cursor: pointer;
}

.zentrum {
.zentrum-behaelter {
  display: flex;
  flex-flow: row;
  overflow-x: hidden;
  flex-flow: column;
}


/* Dialogfeld */

.dialog {
  background-color: #fffbde;
  position: relative;
}


/*
  Close Button

  <div>
    <span class="close-btn">&#10006;</span>
  </div>
*/

.close-btn {
  position: absolute;
  top: 0px;
  right: 0.4em;
  margin: 0;
  padding: 0;
  font-size: 1.3em;
  color: #b8b8b8;
}

/* Sender */
@@ -46,7 +127,6 @@
  padding: 0.4em;
  flex-wrap: wrap;
  background-color: #eaeaea;
  width: 100%;
}

.sender-kachel {
@@ -67,6 +147,12 @@
  background-color: #ebe6e6;
}

/* Menü-Erscheinung */

.app-menu-kopf {
  font-family: Oswald;
}

/* fonts */

@font-face {

 app.js

@@ -5,6 +5,7 @@
var prefsRendered = false;

function app_init() {
  $('.dialog').hide();
  $('.ost').hide();
  app_menu_init("menu/", "hauptmenue.json", "../jslib/app-menu/app-menu.tpl", ".west");
  app_get_template('tpl/sender.tpl', TPL_SENDER);
@@ -15,6 +16,11 @@
  }, 200);
}

function app_nachricht_test() {
  $('.dialog').slideDown(300);

}

/* --- Ajax-Aufrufe --- */

function app_get_sender() {

 index.html

@@ -4,7 +4,7 @@
    <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-layout/app-layout.css">
    <!-- <link rel="stylesheet" type="text/css" href="../jslib/app-layout/app-layout.css"> -->
    <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="app.css">
@@ -16,19 +16,32 @@
        <a id="nav-toggle" href="#"><span></span></a>
      </div>
      <div class="app-titel">
        <span id="app-titel">Home</span>
        <span id="app-titel">Radio-UI</span>
      </div>
    </div>
    <!-- Inhalt -->
    <div class="inhalt">
      <!-- westliche Seitenleiste -->
      <div class="west"></div>
      <!-- zentraler Inhaltsbereich -->
      <div class="zentrum">
        <div id="prefs"></div>
        <div id="home"></div>
        <div class="sender-behaelter">
          <div id="sender" class="sender"></div>
      <!-- zentraler Bereich -->
      <div class="zentrum-behaelter">

        <!-- Einblendbereich -->

        <div class="dialog">
          <div class="nachricht">
            <span class="close-btn">&#10006;</span>
            Hier kann eine Mitteilung stehen.
          </div>
        </div>
      
        <!-- zentraler Inhaltsbereich -->
        <div class="zentrum">
          <div id="prefs"></div>
          <div id="home"></div>
          <div class="sender-behaelter">
            <div id="sender" class="sender"></div>
          </div>
        </div>
      </div>
      <!-- oestliche Seitenleiste -->

 menu/hauptmenue.json

@@ -28,6 +28,11 @@
        "funktion": "app_show_prefs"
      },
      {
        "titel": "Nachricht-Test",
        "umenue": false,
        "funktion": "app_nachricht_test"
      },
      {
        "titel": "H Menüeintrag 2",
        "umenue": true,
        "verweis": "untermenue-1.json"