kth-csc-iprog · ghost · Jan 19, 2018 · Jan 19, 2018 · Jan 19, 2018 · Jan 22, 2018
diff --git a/README.md → Lab1/README.md b/README.md → Lab1/README.md
@@ -11,3 +11,4 @@ What's in the project
 * [js/view/](https://github.com/kth-csc-iprog/dinnerplanner-html/tree/master/js/view) - here you can find a JavaScript code of an example view. The view sets up some initial components and their values.
 * [js/app.js](https://github.com/kth-csc-iprog/dinnerplanner-html/blob/master/js/app.js) - this is the overall code of the application. It is responsible for initial setup of the app (when the page loads for the first time). 
 * [images/](https://github.com/kth-csc-iprog/dinnerplanner-html/tree/master/images) - folder contains some pictures you can use for your dishes
+hej
diff --git a/Lab1/ej aktuell/home.html b/Lab1/ej aktuell/home.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Dinner planner</title>
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="style.css">
+
+</head>
+<body>
+
+	<div class="jumbotron"><h1 class="text-center">Dinner Planner</h1></div>
+
+	<div class="container">
+
+		<p align="center">
+			The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.
+		</p>
+
+		<div class="text-center">
+		<button class="btn btn-success">Create new dinner</button>
+		</div>
+	</div>
+
+</body>
+</html>
diff --git a/index.html → Lab1/ej aktuell/index.html b/index.html → Lab1/ej aktuell/index.html
@@ -11,7 +11,7 @@
 
   </head>
   <body>
-	<div class="container">
+	<div class="startPage">
 		<h1>Dinner planner</h1>
 		<div id="exampleView">
 			<div>

diff --git a/Lab1/ej aktuell/start.css b/Lab1/ej aktuell/start.css
@@ -0,0 +1,33 @@
+body {
+	background: url("https://fthmb.tqn.com/uZwLBI5jpv1YjOTwGGmFuSyUhg4=/1920x1280/filters:fill(auto,1)/dish-918613_1920-5812723a3df78c2c73a334d9.jpg");
+	background-size: cover;
+	background-position: center;
+	font-family: 'Lato', sans-serif;
+	color: #2c3e50;
+
+
+}
+
+html {
+	height: 100%;
+}
+
+h1, h3 {
+	font-weight: 700;
+}
+
+.content {
+	text-align: center;
+	padding-top: 25%;
+	text-shadow: 0px 4px 3px rgba(0,0,0,0.4)
+			0px 8px 13px rgba(0,0,0,0.1),
+			0px 18px 23px rgba(0,0,0,0.1);
+}
+
+
+hr {
+    border: 0;
+    width: 400px;
+    height: 1px;
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
+}
diff --git a/Lab1/ej aktuell/style.css b/Lab1/ej aktuell/style.css
@@ -0,0 +1,28 @@
+.startPage {
+	width: 80%;
+	max-width: 700px
+}
+
+.row {
+	border: 1px solid black;
+}
+
+.col {
+	border: 1px solid black;
+}
+
+.viprovar {
+	border: 1px solid black;
+	height: 50px;
+
+}
+
+.hojd {
+	height: 500px;
+}
+
+img	{
+	width: 200px;
+	float: left;
+	margin: 1.66%;
+}
diff --git a/Lab1/ej aktuell/style2B.css b/Lab1/ej aktuell/style2B.css
@@ -0,0 +1,71 @@
+form{
+  margin-bottom: 10px;
+}
+input#numberOfGuests{
+  width: 40px;
+}
+
+img{
+  width: 100%;
+}
+
+html,body,.container {
+    height:100%;
+}
+
+table {
+    width: 100%;
+    border: 1px solid black;
+}
+
+.sidebar {
+    background-color: lightgreen;
+    height: 800px;
+   /* margin-left: 0;*/
+}
+
+.nav-sidebar {
+  margin-right: -21px; /* 20px padding + 1px border */
+  margin-bottom: 20px;
+  margin-left: -20px;
+}
+.nav-sidebar > li > a {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+.caption {
+    text-align: center;
+}
+
+.jumbotron  {
+  text-align: center;
+}
+
+.row {
+    height: 100%;
+    display: table-row;
+}
+
+.row .no-float {
+  display: table-cell;
+  float: none;
+}
+
+/* Sidebar modules for boxing content */
+.sidebar-module {
+  padding: 15px;
+  margin: 0 -15px 15px;
+}
+.sidebar-module-inset {
+  padding: 15px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.sidebar-module-inset p:last-child,
+.sidebar-module-inset ul:last-child,
+.sidebar-module-inset ol:last-child {
+  margin-bottom: 0;
+}
+
+
diff --git a/Lab1/ej aktuell/view-2B.html b/Lab1/ej aktuell/view-2B.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>View2 update 2</title>
+
+	 <!-- Our Custom CSS -->
+        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" type="text/css" href="style2B.css">
+</head>
+<body>
+
+
+	<div class="container-fluid">
+		<div class="row header">
+			<div class="col-sm-12">
+				<h1>Dinner Planner</h1>
+			</div>
+		</div>
+		<!-- <div class="jumbotron"><h1>Dinner Planner</h1> </div>
+		<div class="container-fluid"> -->
+			<div class="row">
+				<div class="col-lg-2 col-md-2 col-sm-2 blog-sidebar hidden-xs">
+          <div class="sidebar-module sidebar-module-inset">
+            <h4>My Dinner</h4>
+            <form class="form-inline">
+            	People: <span id="numberOfGuests"></span>
+            	<input type="number" min="1" id="numberOfGuests" name="numberOfGuests">
+			      </form>
+          </div>
+          <div class="sidebar-module">
+            <table>
+            	<thead>
+            		<th>Dish Name</th>
+            		<th>Cost</th>
+            	</thead>
+            </table>
+          </div>
+          <div class="sidebar-module">
+            <button class="btn btn-default">Confirm Dinner</button>
+          </div>
+        </div><!-- /.blog-sidebar -->
+			<!-- </div>
+		</div> -->
+<div class="row">
+  <div class="col-md-10">
+    <h2>Add another dish</h2>
+
+      <form class="form-inline">
+          <!-- <label for="keywords">Enter keywords</label> -->
+        <input class="form-control" type="text" id="keywords" placeholder="Enter key words">
+          <select class="form-control">
+            <option>Main Course</option>
+            <option>Side Dish</option>
+            <option>Dessert</option>
+            <option>Appetizer</option>
+          </select>
+          <button class="form-control btn btn-default">Search</button>
+      </form>
+  </div>
+</div>
+<div class="row">
+  <div class="col-sm-2 col-xs-12">
+      <a href="#" class="thumbnail">
+        <img class="center-crop img-responsive" src="images/icecream.jpg" alt="...">
+        <div class="caption">
+          <h4>Icecream</h4>
+        </div>
+      </a>
+  </div>
+  <div class="col-sm-2 col-xs-12">
+      <a href="#" class="thumbnail">
+        <img class="center-crop img-responsive bild2" src="images/bakedbrie.jpg" alt="...">
+        <div class="caption">
+          <h4>Bakedbrie</h4>
+        </div>
+      </a>
+  </div>
+  <div class="col-sm-2 col-xs-12">
+      <a href="#" class="thumbnail">
+        <img class="center-crop img-responsive" src="images/meatballs.jpg" alt="...">
+        <div class="caption">
+          <h4>Meatballs</h4>
+        </div>
+      </a>
+  </div>
+  <div class="col-sm-2 col-xs-12">
+      <a href="#" class="thumbnail">
+        <img class="center-crop img-responsive" src="images/sourdough.jpg" alt="...">
+        <div class="caption">
+          <h4>Sourdough</h4>
+        </div>
+      </a>
+  </div>
+  <div class="col-sm-2 col-xs-12">
+      <a href="#" class="thumbnail">
+        <img class="center-crop img-responsive" src="images/toast.jpg" alt="...">
+        <div class="caption">
+          <h4>Toast</h4>
+        </div>
+      </a>
+  </div>
+</div> <!--row-->
+<!--<div class="col-lg-3 col-sm-4">
+    <div class="thumbnail">
+      <img class="center-crop" src="https://images.unsplash.com/photo-1503022932596-500eb8cca2d8?ixlib=rb-0.3.5&s=079403628f8823de69c3aa1485f79f97&auto=format&fit=crop&w=1000&q=80" alt="...">
+      <div class="caption">
+        <h3>Dish 1</h3>
+        <p><a href="#" class="btn btn-primary" role="button">Select</a></p>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-3 col-sm-4">
+    <div class="thumbnail">
+      <img src="https://images.unsplash.com/photo-1503022932596-500eb8cca2d8?ixlib=rb-0.3.5&s=079403628f8823de69c3aa1485f79f97&auto=format&fit=crop&w=1000&q=80" alt="...">
+      <div class="caption">
+        <h3>Dish 1</h3>
+        <p><a href="#" class="btn btn-primary" role="button">Select</a></p>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-sm-4">
+    <div class="thumbnail">
+      <img src="https://images.unsplash.com/photo-1503022932596-500eb8cca2d8?ixlib=rb-0.3.5&s=079403628f8823de69c3aa1485f79f97&auto=format&fit=crop&w=1000&q=80" alt="...">
+      <div class="caption">
+        <h3>Dish 1</h3>
+        <p><a href="#" class="btn btn-primary" role="button">Select</a></p>
+      </div>
+    </div>
+  </div>
+
+	</div>
+
+
+-->
+
+<!-- jQuery CDN -->
+        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
+        <!-- Bootstrap Js CDN -->
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <!-- Custom Scroller Js CDN -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
+
+</body>
+</html>
diff --git a/Lab1/ej aktuell/view2-oaus.html b/Lab1/ej aktuell/view2-oaus.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Dinner planner</title>
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="style.css">
+
+</head>
+<body>
+
+	<div class="jumbotron"><h1 class="text-center">Dinner Planner</h1></div>
+
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-lg-3 viprovar">
+			<div class="row">Hejsan</div>
+			</div>
+		<div class="col-lg-9">
+			<div class="row">
+				<div class="col-lg-6">rad 1</div>
+				<div class="col-lg-6">rad 2</div>
+			</div>
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>