Merge branch 'Add-Parsedown-Support' into 'develop'

Add parsedown support

See merge request bluekay/shopping-list!1

.gitignore

@@ -0,0 +1 @@
+config/config.php

.htaccess

@@ -2,7 +2,7 @@
   #Rewrite Engine anschalten
   RewriteEngine on
 
-  #normale Seiten ohne Unterverzeichnis (Liste, Rezeptliste)
+  #normale Seiten ohne Unterverzeichnis (Liste, Rezeptliste, neues Rezept)
   RewriteRule ^([a-zA-Z0-9-]+)$ ?site=$1
 
   #Error Seite
@@ -11,6 +11,9 @@
   #Rezept Seite
   RewriteRule ^recipe/([0-9]+)$ ?site=recipe&number=$1
 
+  #Rezepteditieren
+  RewriteRule ^edit-recipe/([0-9]+)$ ?site=edit-recipe&number=$1
+
   #Loginseite
   RewriteRule ^login/url=(.+)$ ?site=login&refurl=$1 [L]
 

README.md

@@ -1,17 +1,21 @@
-# Voraussetzungen
-## Apache Module:
+# Requirements
+
+## Apache Modules:
 * mod-rewrite
+
 ## Packages
 * php7
 * php7-mysql
 
-# Beispiel Apache Config
+# Sample Apache Config
 ```apache
 <VirtualHost *:80>
     ServerAdmin webmaster@localhost
+    ServerName shopping.example.com
 
     DocumentRoot /var/www/html/shopping-list
     <Directory /var/www/html/shopping-list>
+
       	AllowOverride All
     </Directory>
 
@@ -19,6 +23,18 @@
     CustomLog ${APACHE_LOG_DIR}/access.log combined
 </VirtualHost>
 ```
-# Installation
-Um die Installation zu starten folgende Seite aufrufen:
-[HOSTNAME]/install/install.php
+
+# Installation Instructions
+
+* create a new mysql-database. Please use `utf8_general_ci` as your collation.
+* create a new mysql-user that can edit the database.
+
+* Download the latest release. You can download it [here (tar.gz)](https://gitlab.com/bluekay/shopping-list/-/archive/master/shopping-list-master.tar.gz) or [here (zip)](https://gitlab.com/bluekay/shopping-list/-/archive/master/shopping-list-master.zip)
+* unpack the archive and copy its content to `/var/www/html/shopping-list`
+* grant your web server permission to write the config-file
+```bash
+chown www-data:www-data /var/www/html/shopping-list/config/config.php
+```
+* visit the address of your web browser, you will be redirected to the installation page
+* insert your database information and create your login user
+* thats it, you are good to go. You may login now!

cont/recipe.php

@@ -1,12 +1,14 @@
 <link rel="stylesheet" href="/style/recipe.css">
+<link rel="stylesheet" href="/style/parsedown.css">
 <script src="/bin/recipe.js" charset="utf-8"></script>
 <?php
   include $_SESSION["docroot"].'/php/classes.recipe.php';
+    include $_SESSION["docroot"].'/php/classes.parsedown.php';
   $book = new cookbook;
   $book->getRecipe($_GET["number"]);
   $recipe = $book->sites[0];
 
-  echo "<h1 data-recipeid='$recipe->ID'>$recipe->Name</h1>";
+  echo "<h1 id='recipeHeader' data-recipeid='$recipe->ID'>$recipe->Name</h1>";
   echo "<h2>Zutaten</h2>";
   echo "<button id='addToListButton' class='button'>Zur Einkaufsliste hinzufügen</button>";
   echo "<div id='ingredients'>";
@@ -17,9 +19,10 @@
   }
   echo "</div>";
   echo "<h2>Zubereitung</h2>";
-  foreach(explode("\r\n", $recipe->Beschreibung) as $paragraph){
-    echo "<p>$paragraph</p>";
-  }
+  echo "<section class='parsedown-section'>";
+  $parsedown = new Parsedown;
+  echo $parsedown->text($recipe->Beschreibung);
+  echo "</section>";
 ?>
 <div id="editingMenu"></div>
 <div id="editingMenuOpen">

php/classes.recipe.php

@@ -120,7 +120,7 @@
         }
         else{
           $mysqli->query("INSERT INTO `Zutat` (`Name`) VALUES ('".ucwords($Zutat["Name"])."')");
-          $ingredientID = $mysqli->insert_id;
+          $ZutatID = $mysqli->insert_id;
         }
         $mysqli->query("INSERT INTO `RezeptZutat` (`Rezept`,`Menge`,`Einheit`,`Zutat`) VALUES ('{$ID}','{$Zutat["Amount"]}','{$Zutat["Unit"]}','{$ZutatID}');");
       }

style/list.css

@@ -21,7 +21,13 @@
   margin-bottom: .1em;
   color: #ffffff;
   align-items: center;
-  border-radius: 5px;
+  border-left: 3px solid #4CAF50;
+  border-bottom-right-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.list_row.new {
+border-left: none;
 }
 
 .list_row_count {
@@ -78,6 +84,15 @@
 .checked {
   background-color: #4CAF50;
 }
+
+.list_row.even.checked {
+  border-left: 3px solid #565656;
+}
+
+.list_row.odd.checked {
+  border-left: 3px solid #888;
+}
+
 #saved, #error {
   pointer-events: none;
   position: fixed;

style/manageRecipe.css

@@ -34,7 +34,7 @@
   margin-bottom: .1em;
 }
 .ingredientAmount {
-  width: 2em;
+  width: 3em;
   font-size: 16px;
   padding: .2em;
   border: 1px solid #ddd;

style/master.css

@@ -1,19 +1,39 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
+@font-face {
+    font-family: Roboto;
+    src: url("/fonts/Roboto-Regular.ttf");
+}
+
 html {
   transition: .6s;
-  font-family: 'Open Sans', sans-serif;
-  background-color: #c3c3c3;
+  font-family: 'Roboto';
+  background-color: #ccc;
 }
+
 h1 {
   font-size: 3em;
+  margin-top: .5em;
+  padding-bottom: .5em;
+  border-bottom: 1px solid grey;
   text-align: center;
 }
+
+h2 {
+  font-size: 2em;
+  text-align: left;
+  margin-top: .5em;
+  padding-bottom: .5em;
+  border-bottom: 1px solid grey;
+  width: 80%;
+}
+
 .even {
-  background-color: #000;
+  background-color: #565656;
 }
+
 .odd {
-  background-color: #5f5f5f;
+  background-color: #888;
 }
+
 .search {
   background-image: url('/pic/search.png');
   background-position: 10px 12px;
@@ -22,6 +42,7 @@ h1 {
   padding: 12px 20px 12px 40px;
   border: 1px solid #ddd;
 }
+
 .button {
   -webkit-appearance: none;
   border: none;
@@ -33,6 +54,7 @@ h1 {
   background-color: #4CAF50;
   color: white;
 }
+
 .hover:hover {
   background-color: #4CAF50;
   cursor: pointer;

style/parsedown.css

@@ -0,0 +1,100 @@
+.parsedown-section h1 {
+  font-size: 1.3em;
+  text-align: left;
+  border-bottom: 1px solid grey;
+  color: #333;
+  text-transform: uppercase;
+  max-width: 75%;
+}
+
+.parsedown-section h2 {
+  font-size: 1.2em;
+  text-align: left;
+  border-bottom: 1px solid grey;
+  color: #333;
+  text-transform: uppercase;
+  max-width: 70%;
+}
+
+.parsedown-section h3 {
+  font-size: 1.1em;
+  text-align: left;
+  border-bottom: 1px solid grey;
+  color: #444;
+  text-transform: capitalize;
+  max-width: 60%;
+}
+
+.parsedown-section h4 {
+  font-size: 1em;
+  text-align: left;
+  border-bottom: 1px solid grey;
+  color: #444;
+  text-transform: capitalize;
+  max-width: 60%;
+}
+
+.parsedown-section h5 {
+  font-size: .9em;
+  text-align: left;
+  border-bottom: 1px solid grey;
+  color: #555;
+  text-transform: lowercase;
+  font-weight: normal;
+  max-width: 55%;
+}
+
+.parsedown-section h6 {
+  font-size: .8em;
+  text-align: left;
+  border-bottom: 1px solid grey;
+  color: #555;
+  text-transform: lowercase;
+  font-weight: normal;
+  max-width: 50%;
+}
+
+.parsedown-section table {
+  border-collapse: collapse;
+  border: 1px solid black;
+  margin: 1em 0;
+}
+
+.parsedown-section th {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.parsedown-section td, th {
+  /* border: 1px solid black; */
+  padding: .2em .5em;
+}
+
+.parsedown-section tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+.parsedown-section button {
+  display: block;
+  border: 1px solid #777777;
+  padding: .5em 1em;
+  margin: 1em .25em;
+}
+
+.parsedown-section pre {
+  max-height: calc(50vh - 9em);
+  background: #f4f4f4;
+  border: 1px solid #ddd;
+  border-left: 3px solid #a0c391;
+  color: #666;
+  page-break-inside: avoid;
+  font-family: monospace;
+  font-size: 15px;
+  line-height: 1.6;
+  margin-bottom: 1.6em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1em 1.5em;
+  display: block;
+  word-wrap: break-word;
+}

style/recipe.css

@@ -11,19 +11,24 @@
   width: 100%;
 }
 .ingredients_row {
-  width: 95%;
-  max-width: 30em;
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  border-radius: 5px;
+  min-height: 24px;
   margin-bottom: .1em;
+  align-items: center;
+  border-left: 3px solid #4CAF50;
+  border-bottom-right-radius: 5px;
+  border-top-right-radius: 5px;
+  max-width: 30em;
 }
 .ingredients_row_amount {
-  text-indent: 1em;
+  width: auto;
+  min-width: 2em;
+  max-width: 3em;
+  text-align: right;
 }
 .ingredients_row_unit {
+  width: 4em;
   text-indent: .5em;
   text-align: left;
 }