Updated some styling

hguha · Apr 10, 2019 · d4495ab · d4495ab
1 parent 585b711
commit d4495ab
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 34 deletions.
diff --git a/app/UserInfo.py b/app/UserInfo.py
@@ -63,7 +63,7 @@ def AddFolder(username):
         username (str): The username to create image folder
     """
     try:
-        newFolder = os.getcwd() + "static/UserPictures/" + username
+        newFolder = os.getcwd() + "/static/UserPictures/" + username
         os.mkdir(newFolder)
     except FileExistsError:
         pass
diff --git a/app/UserInfo.txt b/app/UserInfo.txt
@@ -6,3 +6,4 @@ bob 9f9d51bc70ef21ca5c14f307980a29d8
 Jerry dbaf60f3a397e1d27630a459c1700ea7
 hirsh d988318ebac9f246609d6866a10784ae
 ryan 10c7ccc7a4f0aff03c915c485565b9da
+eric 29988429c481f219b8c5ba8c071440e1
diff --git a/app/__pycache__/UserInfo.cpython-37.pyc b/app/__pycache__/UserInfo.cpython-37.pyc
diff --git a/app/static/style.css b/app/static/style.css
@@ -1,7 +1,24 @@
-*
-{
-    font-family: helvetica;
+*, *::after, *::before {
+  box-sizing: border-box;
+}
+
+body {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: 'Open Sans';
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+    background-color: #eee;
+    color: #333;
+    min-height: 100vh;
+    width: 100vw;
 }
+
 .login
 {
     padding: 10%;
@@ -52,7 +69,7 @@ input
 }
 
 
-button, a, input[type=submit]
+button, a, input[type=submit], label
 {
     background-color: #3c3c3c;
     border: 2px solid #3c3c3c;
@@ -65,9 +82,39 @@ button, a, input[type=submit]
     margin-top: -10px;
     transition-duration: 0.6s;
     cursor: pointer;
+    margin: 5px;
 }
 
 button:hover, a:hover {
   background-color: white;
   color: #3c3c3c;
 }
+
+input[type=file] {
+    background-color: #333;
+    height: 0vh;
+    width: 0vw;
+    opacity: 0;
+}
+
+input[type=file]:focus + label,
+input[type=file] + label:hover {
+    background-color: white;
+    color: #3c3c3c;
+    cursor: pointer;
+}
+
+#images {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 10vh 10vw;
+}
+
+img {
+    max-width: 30vw;
+    max-height: 40vh;
+    height: auto;
+    margin: 15px;
+}
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -1,5 +1,6 @@
 <head>
     <title>Dogstagram</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="../static/style.css">
 
     <!-- Add the Firebase and Cloud Firestore libraries to app -->
@@ -9,15 +10,17 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <body>
-  <div class="login">
-  <h1>Dogstagram</h1>
+  <div class="container">
+    <div class="login">
+      <h1>Dogstagram</h1>
 
-  <input type="username" placeholder="Username" id="username" required>
-  <input type="password" placeholder="Password" id="password" required>
-  <br><br>
-  <button type="submit" onclick="login()">Login</button>
-  <button type="submit" onclick="signup()">Sign Up</button>
+      <input type="username" placeholder="Username" id="username" required>
+      <input type="password" placeholder="Password" id="password" required>
+      <br><br>
+      <button type="submit" onclick="login()">Login</button>
+      <button type="submit" onclick="signup()">Sign Up</button>
+    </div>
   </div>
 
-   <script src = "../static/main.js" defer></script>
+  <script src = "../static/main.js" defer></script>
 </body>
diff --git a/app/templates/landing.html b/app/templates/landing.html
@@ -3,6 +3,7 @@
 <head>
   <title>Dogstagram</title>
   <!--<link rel='shortcut icon' href='../index.ico' type='image/x-icon'/>-->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="../static/style.css"/>
 
   <!-- Add the Firebase and Cloud Firestore libraries to app -->
@@ -13,27 +14,29 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <body>
-  <div class="topBar">
-      <img id="profilePic" src="../static/default.jpg" onclick="logOut()"></img>
-        Welcome, <span id="username">Test User</span>!<br>
-      <input type="text" placeholder = "Input another User"></input><br><br>
-
-      <!--text input field for image urls? Or something else?-->
-      <button type="button" id="image" onclick="uploadImage()">Add Image</button>
-
-      <button type="button" onclick="logOut()">Log Out</button>
-
-      <div id="upload" style="visibility: hidden;">
-          <form action="/upload" method="post" enctype="multipart/form-data">
-            <input type="file" name="image" id="image">
-            <input type="submit" value="Upload!">
-          </form>
-      </div>
-  </div>
-  <br>
-  <div id="message">&nbsp</div>
-  <div id="images">
-
+  <div class="container">
+    <div class="topBar">
+        <img id="profilePic" src="../static/default.jpg" onclick="logOut()"></img>
+          Welcome!<br>
+
+        <!--text input field for image urls? Or something else?-->
+        <button type="button" id="image" onclick="uploadImage()">Add Image</button>
+
+        <button type="button" onclick="logOut()">Log Out</button>
+
+        <div id="upload" style="visibility: hidden;">
+            <form action="/upload" method="post" enctype="multipart/form-data">
+              <input type="file" name="image" id="imageUpload" required>
+              <label for="imageUpload">Choose Your Image</label>
+              <input type="submit" value="Upload!">
+            </form>
+        </div>
+    </div>
+    <br>
+    <div id="message">&nbsp</div>
+    <div id="images">
+
+    </div>
   </div>
   <script src = "../static/main.js" defer></script>
 </body>