0.1.5

.gitignore

@@ -0,0 +1,5 @@
+public/main.css
+node_modules
+*.jpg
+*.png
+*.jpeg

.gitlab-ci.yml

@@ -1,32 +1,32 @@
-# Using the node alpine image to build the React app
-image: node:alpine
-
-# Announce the URL as per CRA docs
-# https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration
-
-# Cache node modules - speeds up future builds
-#cache:
-#  paths:
-#  - node_modules
-
-# Name the stages involved in the pipeline
-stages:
-- deploy
-
-# Job name for gitlab to recognise this results in assets for Gitlab Pages
-# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements
-pages:
-  stage: deploy
-  script:
-    - npm install # Install all dependencies
-    - npm install -g less
-    - npm run build --prod # Build for prod
-    - cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46
-    - mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
-    - mv build public # Move build files to public dir for Gitlab Pages
-    - lessc src_less/main.less public/main.css
-  artifacts:
-    paths:
-    - public # The built files for Gitlab Pages to serve
-  only:
+# Using the node alpine image to build the React app
+image: node:alpine
+
+# Announce the URL as per CRA docs
+# https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration
+
+# Cache node modules - speeds up future builds
+#cache:
+#  paths:
+#  - node_modules
+
+# Name the stages involved in the pipeline
+stages:
+- deploy
+
+# Job name for gitlab to recognise this results in assets for Gitlab Pages
+# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements
+pages:
+  stage: deploy
+  script:
+    - npm install # Install all dependencies
+    - npm install -g less
+    - npm run build --prod # Build for prod
+    - cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46
+    - mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
+    - mv build public # Move build files to public dir for Gitlab Pages
+    - lessc src_less/main.less public/main.css
+  artifacts:
+    paths:
+    - public # The built files for Gitlab Pages to serve
+  only:
     - master # Only run on master branch

public/main.css

@@ -1,94 +0,0 @@
-.App {
-  border: #e0e0e0 1px solid;
-  margin: 24px;
-}
-* {
-  box-sizing: border-box;
-  font-family: Open Sans, Arial, sans-serif;
-}
-html,
-body {
-  margin: 0;
-  color: rgba(0, 0, 0, 0.87);
-  background-color: #f9f9f9;
-}
-.nav {
-  background-color: #f4f5f6;
-  height: 52px;
-  line-height: 50px;
-  display: flex;
-  border: #e0e0e0 1px solid;
-}
-.nav .select-wrapper {
-  position: relative;
-  width: 200px;
-}
-.nav .select-wrapper::before {
-  color: #0c81f5;
-  font-size: 20px;
-  pointer-events: none;
-  position: absolute;
-  right: 15px;
-  top: 10px;
-}
-.nav select {
-  background: #f4f5f6;
-  border: none;
-  border: 1px #0c81f5 solid;
-  color: #0c81f5;
-  cursor: pointer;
-  font-family: 'Open Sans', sans-serif;
-  font-size: 16px;
-  height: 40px;
-  outline: none;
-  padding-left: 10px;
-  width: 100%;
-}
-.nav select option {
-  color: #0c81f5;
-}
-.nav select::-ms-expand {
-  display: none;
-}
-.nav select:focus::-ms-value {
-  background-color: transparent;
-}
-.nav input[type=number] {
-  height: 40px;
-  border: 1px solid #0c81f5;
-  background: none;
-  color: #0c81f5;
-  padding: 0px 5px;
-}
-.nav button {
-  height: 40px;
-  border: 1px solid #0c81f5;
-  background: #0c81f5;
-  color: #FFF;
-}
-.studentList {
-  display: flex;
-  flex-wrap: wrap;
-}
-.studentList .user {
-  border: 1px solid #454545;
-  margin: 5px;
-  padding: 5px;
-  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
-}
-.studentList .user.disappear {
-  opacity: 0.09;
-  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
-}
-.studentList .user.appear {
-  opacity: 1;
-  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
-}
-.studentList .user .user_img img {
-  width: 200px;
-}
-.studentList .user .username {
-  text-align: center;
-  display: inline-block;
-  width: 200px;
-}

src_less/main.less

@@ -95,7 +95,7 @@ html,body{
             opacity: 0.09;
             transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
         }
-        &.appear{
+        &.appear{ 
             opacity: 1;
             transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
         }