Adding alert info panel

Oktawian-L · Nov 3, 2019 · 052dfe7 · 052dfe7
1 parent e429297
commit 052dfe7
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 12 deletions.
diff --git a/Subiton/src/app/home/home.component.css b/Subiton/src/app/home/home.component.css
@@ -0,0 +1,4 @@
+.motto-text{
+  text-decoration-color:red;
+  padding: 20px;
+}
diff --git a/Subiton/src/app/home/home.component.html b/Subiton/src/app/home/home.component.html
@@ -2,7 +2,7 @@
 
   <div *ngIf="!registerMode" style="text-align: center">
     <h1>Subiton</h1>
-    <p>First polish animal dating app</p>
+    <div class="motto-text">First polish animal dating app</div>
     <div class="text-center">
       <button class="btn btn-primary btn-lg mr-3" (click)="registerToggle()">Register</button>
       <button class="btn btn-info btn-lg">Info</button>

diff --git a/Subiton/src/app/likes/likes.component.css b/Subiton/src/app/likes/likes.component.css
@@ -0,0 +1,5 @@
+.favourites-name {
+  text-align: center;
+  color: lightskyblue;
+
+}
diff --git a/Subiton/src/app/likes/likes.component.html b/Subiton/src/app/likes/likes.component.html
@@ -1,3 +1,8 @@
-<p>
-  likes works!
-</p>
+<div class="favourites-name">
+  Waiting for the server to respond...
+  <br/>
+  <div class="spinner-border text-info" role="status">
+    <span class="sr-only">Loading...</span>
+  </div>
+</div>
+
diff --git a/Subiton/src/app/messages/messages.component.css b/Subiton/src/app/messages/messages.component.css
@@ -0,0 +1,5 @@
+.messages-name {
+  font-style: italic;
+  text-align: center;
+  color: lightskyblue;
+}
diff --git a/Subiton/src/app/messages/messages.component.html b/Subiton/src/app/messages/messages.component.html
@@ -1,3 +1,7 @@
-<p>
-  messages works!
-</p>
+<div class="messages-name">
+  Waiting for the server to respond...
+  <br />
+  <div class="spinner-border text-info" role="status">
+    <span class="sr-only">Loading...</span>
+  </div>
+</div>
diff --git a/Subiton/src/app/register/register.component.css b/Subiton/src/app/register/register.component.css
@@ -0,0 +1,4 @@
+.agree-to-terms{
+  text-align: center;
+  padding-bottom: 20px;
+}
diff --git a/Subiton/src/app/register/register.component.html b/Subiton/src/app/register/register.component.html
@@ -2,11 +2,19 @@
   <h2 class="text-center">New account</h2>
   <hr>
   <div class="form-group">
-    <input type="text" class="form-control" placeholder="Username" required name="Username" [(ngModel)]="model.username">
+    <input type="text" class="form-control" placeholder="Username" required name="Username"
+      [(ngModel)]="model.username">
   </div>
-  <div  class="form-group">
-    <input type="password" class="form-control" placeholder="Password" required name="Password" [(ngModel)]="model.Password">
+  <div class="form-group">
+    <input type="password" class="form-control" placeholder="Password" required name="Password"
+      [(ngModel)]="model.Password">
   </div>
+    <div class="agree-to-terms">
+      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
+      <label class="form-check-label" for="defaultCheck1">
+        I agree to terms of service.
+      </label>
+    </div>
   <div class="form-group text-center">
     <button class="btn btn-success" type="submit">
       Register

diff --git a/Subiton/src/app/users/user-edit/user-edit.component.css b/Subiton/src/app/users/user-edit/user-edit.component.css
@@ -7,10 +7,14 @@
   padding: 0 15px;
 }
 .card-footer {
-  padding: 0 15px;
+  padding:15px;
   border-top: none;
   margin-bottom: 10px;
 }
+.card-footer .btn{
+  margin-right: 5px;
+  margin-left: 5px;
+}
 .tr {
   border: black;
   border-style: solid;
@@ -36,3 +40,6 @@
 .textarea{
   width: 90%;
 }
+.alert-info{
+  width:100%;
+}
diff --git a/Subiton/src/app/users/user-edit/user-edit.component.html b/Subiton/src/app/users/user-edit/user-edit.component.html
@@ -3,7 +3,13 @@
     <h1>
       Edit your's pet profile
     </h1>
+    <div class="col-sm-8">
+      <div *ngIf="editForm.dirty" class="alert alert-info" style="margin-left: 25px;">
+        <strong>Info alert: </strong>You have unsaved changes. Are you sure?
+      </div>
+    </div>
   </div>
+
   <div class="row">
     <div class="col-sm-4">
       <div class="card">
@@ -31,11 +37,15 @@ <h1>
           </div>
         </div>
         <div class="card-footer">
+          <div class="btn-group d-flex">
+            <button class="btn btn-success w-100"><i class="fa fa-save"></i> Save</button>
+            <button class="btn btn-warning w-100"><i class="fa fa-warning"></i> Cancel</button>
+          </div>
         </div>
       </div>
     </div>
     <div class="col-sm-8">
-      <form>
+      <form #editForm="ngForm">
         <div class="tab-panel">
           <tabset class="user-tabset">
             <tab heading="Edit information" id="profile_tab1">