From 093b6c8e8c5b3d5d6ebc0a36adbc42c1f8edab1f Mon Sep 17 00:00:00 2001
From: steevLP <mauricefl@outlook.de>
Date: Wed, 27 Jan 2021 02:32:43 +0100
Subject: [PATCH] fix wordwrapping bug and added notification elements

---
 README.md                                 | 13 +++-
 dist/ef19487056b129c8f3eda17f9543ab70.css | 88 +++++++++++++++++++----
 dist/ef19487056b129c8f3eda17f9543ab70.js  |  2 +-
 dist/index.html                           | 20 ++++++
 src/index.html                            | 20 ++++++
 src/scss/main.sass                        | 54 +++++++++++++-
 6 files changed, 177 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 6874694..0ffc1af 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # steevcss
 my own collection of html, css and javascript code combined to a webframework
-1. GridSystem 24 Elemente
+
+## Feature List
+1. GridSystem 12 Elemente [Implemented]
 2. Code Preview
 3. SlideShow
 4. Navigations [Implemented]
@@ -14,4 +16,11 @@ my own collection of html, css and javascript code combined to a webframework
 12. general styled images (rounded borders)
 13. Dropdowns
 14. colored sections (a full length area with defined background-color)
-15. Alert Sections (Sections colored as their meaning with text inside)
+15. Alert Sections [Implemented]
+
+## Stuff i already found
+1. responsiveness is a bit messy
+2. images in navbar are completely messed up
+3. the colors may need a tweak
+4. mobile toggle button needs to be bigger
+5. revert back to standard font collection with verdana in it
\ No newline at end of file
diff --git a/dist/ef19487056b129c8f3eda17f9543ab70.css b/dist/ef19487056b129c8f3eda17f9543ab70.css
index d701ba0..9c82dab 100644
--- a/dist/ef19487056b129c8f3eda17f9543ab70.css
+++ b/dist/ef19487056b129c8f3eda17f9543ab70.css
@@ -10,43 +10,45 @@ body {
 main {
   z-index: 980;
   position: relative;
-  top: 5.5em; }
+  top: 5.5em;
+  width: 100%;
+  word-break: break-all; }
 
 h1 {
-  margin: 10px; }
+  margin: 0; }
 
 h2 {
-  margin: 10px; }
+  margin: 0; }
 
 h3 {
-  margin: 10px; }
+  margin: 0; }
 
 h4 {
-  margin: 10px; }
+  margin: 0; }
 
 h5 {
-  margin: 10px; }
+  margin: 0; }
 
 h6 {
-  margin: 10px; }
+  margin: 0; }
 
 h7 {
-  margin: 10px; }
+  margin: 0; }
 
 h8 {
-  margin: 10px; }
+  margin: 0; }
 
 h9 {
-  margin: 10px; }
+  margin: 0; }
 
 h10 {
-  margin: 10px; }
+  margin: 0; }
 
 h11 {
-  margin: 10px; }
+  margin: 0; }
 
 h12 {
-  margin: 10px; }
+  margin: 0; }
 
 .dev {
   border: 1px solid black; }
@@ -89,9 +91,65 @@ h12 {
   padding: 1rem;
   color: white; }
 
+.notification-primary {
+  width: 100%;
+  display: flex; }
+
+.notification-primary h2 {
+  border-right: 0.3rem solid #3498db;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-danger {
+  width: 100%;
+  display: flex; }
+
+.notification-danger h2 {
+  border-right: 0.3rem solid #e74c3c;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-warning {
+  width: 100%;
+  display: flex; }
+
+.notification-warning h2 {
+  border-right: 0.3rem solid #f1c40f;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-success {
+  width: 100%;
+  display: flex; }
+
+.notification-success h2 {
+  border-right: 0.3rem solid #2ecc71;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-body {
+  line-height: 30pt;
+  font-size: 15pt;
+  word-wrap: break-word; }
+
 div[class^="col-"] {
-  padding: 1rem 0;
-  text-align: center; }
+  padding: 1rem 0; }
 
 .row {
   display: flex;
diff --git a/dist/ef19487056b129c8f3eda17f9543ab70.js b/dist/ef19487056b129c8f3eda17f9543ab70.js
index 5da0295..16f886f 100644
--- a/dist/ef19487056b129c8f3eda17f9543ab70.js
+++ b/dist/ef19487056b129c8f3eda17f9543ab70.js
@@ -149,7 +149,7 @@ function Module() {
 module.bundle.Module = Module;
 
 if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
-  var ws = new WebSocket('ws://localhost:63342/');
+  var ws = new WebSocket('ws://localhost:50893/');
   ws.onmessage = function(event) {
     var data = JSON.parse(event.data);
 
diff --git a/dist/index.html b/dist/index.html
index 4d48311..6e70ad7 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -31,6 +31,26 @@
                 <div class="alert-warning"> test </div>
                 <div class="alert-success"> test </div>
                 <br>
+                <h1 style="text-align: center;">Alert Elements</h1>
+                <div class="notification-primary"> 
+                    <h2 class="notification-primary-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-danger"> 
+                    <h2 class="notification-danger-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-warning"> 
+                    <h2 class="notification-warning-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-success"> 
+                    <h2 class="notification-success-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
                 <h1 style="text-align: center;">CSS Grid</h1>
                 <div class="row">
                     <div class="col-12 display"><h1>12</h1></div>
diff --git a/src/index.html b/src/index.html
index 86de385..643ebe1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -31,6 +31,26 @@
                 <div class="alert-warning"> test </div>
                 <div class="alert-success"> test </div>
                 <br>
+                <h1 style="text-align: center;">Alert Elements</h1>
+                <div class="notification-primary"> 
+                    <h2 class="notification-primary-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-danger"> 
+                    <h2 class="notification-danger-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-warning"> 
+                    <h2 class="notification-warning-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-success"> 
+                    <h2 class="notification-success-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
                 <h1 style="text-align: center;">CSS Grid</h1>
                 <div class="row">
                     <div class="col-12 display"><h1>12</h1></div>
diff --git a/src/scss/main.sass b/src/scss/main.sass
index 4776470..39dd001 100644
--- a/src/scss/main.sass
+++ b/src/scss/main.sass
@@ -24,10 +24,13 @@ main
   z-index: 980
   position: relative
   top: 5.5em
+  width: 100%
+  word-break: break-all
+
 // header classes margin fix
 @for $i from 1 through 12
      h#{$i}
-       margin: 10px
+       margin: 0
 // Dev Classes
 .dev
   border: 1px solid black
@@ -65,10 +68,57 @@ main
   border: 1px solid $success_dark
   padding: 1rem
   color: white
+.notification-primary
+  width: 100%;
+  display: flex
+.notification-primary h2
+  border-right: 0.3rem solid $primary
+  border-radius: 2px
+  padding: 5px
+  margin-right: 5px;
+  min-width: 70px
+  height: auto
+  display: flex
+.notification-danger
+  width: 100%;
+  display: flex
+.notification-danger h2
+  border-right: 0.3rem solid $danger
+  border-radius: 2px
+  padding: 5px
+  margin-right: 5px;
+  min-width: 70px
+  height: auto
+  display: flex
+.notification-warning
+  width: 100%;
+  display: flex
+.notification-warning h2
+  border-right: 0.3rem solid $warning
+  border-radius: 2px
+  padding: 5px
+  margin-right: 5px;
+  min-width: 70px
+  height: auto
+  display: flex
+.notification-success
+  width: 100%;
+  display: flex
+.notification-success h2
+  border-right: 0.3rem solid $success
+  border-radius: 2px
+  padding: 5px
+  margin-right: 5px;
+  min-width: 70px
+  height: auto
+  display: flex
+.notification-body
+  line-height: 30pt
+  font-size: 15pt
+  word-wrap: break-word
 // Grid
 div[class^="col-"]
   padding: 1rem 0
-  text-align: center
 .row
   display: flex
   flex-wrap: wrap