Merge branch 'max-dev' of Software_Engineering_I/greenvironment-server into develop

src/app.ts

@@ -25,6 +25,7 @@ class App {
         await routes.ioListeners(this.io);
         this.app.set("views", path.join(__dirname, "views"));
         this.app.set("view engine", "pug");
+        this.app.use(express.static(path.join(__dirname, "public")));
         this.app.use(routes.router);
     }
 

src/public/stylesheets/sass/mixins.sass

@@ -0,0 +1,5 @@
+@mixin gridPosition($rowStart, $rowEnd, $columnStart, $columnEnd)
+  grid-row-start: $rowStart
+  grid-row-end: $rowEnd
+  grid-column-start: $columnStart
+  grid-column-end: $columnEnd

src/public/stylesheets/sass/style.sass

@@ -0,0 +1,108 @@
+@import "vars"
+@import "mixins"
+
+body
+  font-family: Arial, serif
+
+button
+  border: 2px solid $cPrimary
+  margin-top: 0.125em
+  padding: 0.125em
+  background-color: $cPrimary
+  color: $cPrimarySurface
+  font-weight: bold
+  transition-duration: 0.25s
+
+button:hover
+  background-color: lighten($cPrimary, 10%)
+  cursor: pointer
+
+button:active
+  background-color: darken($cPrimary, 5%)
+  box-shadow: inset 0.25em 0.25em 0.1em rgba(0, 0, 0, 0.25)
+
+.stylebar
+  @include gridPosition(1, 2, 1, 4)
+  display: grid
+  grid-template: 100% /25% 50% 25%
+  background-color: $cPrimary
+  color: $cPrimarySurface
+
+  h1
+    @include gridPosition(1, 2, 1, 2)
+    text-align: center
+    margin: auto
+
+#content
+  grid-template: 7.5% 92.5% / 25% 50% 25%
+  display: grid
+  width: 100%
+  height: 100%
+
+#friendscontainer
+  @include gridPosition(2, 3, 1, 2)
+  background-color: $cPrimaryBackground
+
+#input-login
+  margin-top: 1em
+  @include gridPosition(2,3,2,3)
+  grid-template: 7.5% 7.5% 7.5% 7.5% 72%/ 100%
+  display: grid
+  background-color: $cPrimaryBackground
+
+  input
+    margin: 0.25em
+
+  .loginButton
+    margin: 0.25em
+
+#input-register
+  margin-top: 1em
+  @include gridPosition(2,3,2,3)
+  grid-template: 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 58%/ 100%
+  display: grid
+  background-color: $cPrimaryBackground
+
+  input
+    margin: 0.25em
+
+  .registerButton
+    margin: 0.25em
+
+#feedcontainer
+  @include gridPosition(2, 3, 2, 3)
+  background-color: $cSecondaryBackground
+  .postinput
+    margin: 0.5em
+    input
+      width: 100%
+      border-radius: 0.25em
+      border: 1px solid $cPrimary
+      padding: 0.125em
+      height: 2em
+    button.submitbutton
+      border-radius: 0.25em
+      height: 2em
+
+  .feeditem
+    background-color: $cPrimaryBackground
+    min-height: 2em
+    margin: 0.5em
+    padding: 0.25em
+    border-radius: 0.25em
+    .itemhead
+      align-items: flex-start
+
+      .title, .handle, .date
+        margin: 0.125em
+      .title
+        font-weight: bold
+
+      .handle, .date
+        color: $cInactiveText
+      .handle a
+        text-decoration: none
+        color: $cInactiveText
+        font-style: normal
+      .handle a:hover
+        text-decoration: underline

src/public/stylesheets/sass/vars.sass

@@ -0,0 +1,5 @@
+$cPrimaryBackground: #fff
+$cSecondaryBackground: #ddd
+$cInactiveText: #555
+$cPrimary: #0d6b14
+$cPrimarySurface: #fff

src/routes/home.ts

@@ -49,6 +49,12 @@ class HomeRoute extends Route {
         this.router.get("/", (req, res) => {
             res.render("home");
         });
+        this.router.get("/login", (req, res) => {
+            res.render("login");
+        });
+        this.router.get("/register", (req, res) => {
+            res.render("register");
+        });
     }
 }
 

src/views/home.pug

@@ -1,5 +0,0 @@
-html
-    head
-        title Greenvironment Network
-    body
-        h1 Greenvironment

src/views/home/feed.pug

@@ -0,0 +1,13 @@
+div#feedcontainer
+    div.postinput
+        input(type=text placeholder='Post something')
+        button.submitbutton Submit
+    div.feeditem
+        div.itemhead
+            span.title Testuser
+            span.handle
+                a(href='#') @testuser
+            span.date 23.09.19 10:07
+        p.text
+            | Example Test text.
+            | This is a test

src/views/home/friends.pug

@@ -0,0 +1 @@
+div#friendscontainer

src/views/home/index.pug

@@ -0,0 +1,9 @@
+html
+    head
+        title Greenvironment Network
+        include ../includes/head
+    body
+        div#content
+            include stylebar
+            include feed
+            include friends

src/views/home/stylebar.pug

@@ -0,0 +1,2 @@
+div.stylebar
+    h1 Greenvironment

src/views/includes/head.pug

@@ -0,0 +1 @@
+link(rel='stylesheet' href='stylesheets/style.css')

src/views/login/index.pug

@@ -0,0 +1,8 @@
+html
+    head
+        title Greenvironment Network Login
+        include ../includes/head
+    body
+        div#content
+            include stylebar
+            include login

src/views/login/login.pug

@@ -0,0 +1,6 @@
+div#input-login
+    input(type=text placeholder='username')
+    input(type=text placeholder='password')
+    button.loginButton Login
+    a(href="/register" )            
+        | You aren´t part of greenvironment yet? - create a new account 

src/views/login/stylebar.pug

@@ -0,0 +1,2 @@
+div.stylebar
+    h1 Greenvironment

src/views/register/index.pug

@@ -0,0 +1,8 @@
+html
+    head
+        title Greenvironment Network Register
+        include ../includes/head
+    body
+        div#content
+            include stylebar
+            include register

src/views/register/register.pug

@@ -0,0 +1,8 @@
+div#input-register
+    input(type=text placeholder='username')
+    input(type=text placeholder='email')
+    input(type=text placeholder='password')
+    input(type=text placeholder='repeat password')
+    button.registerButton Register
+    a(href="/login" )     
+        | You are already part of greenvironment? - login 

src/views/register/stylebar.pug

@@ -0,0 +1,2 @@
+div.stylebar
+    h1 Greenvironment