Startsida Utforska Hjälp
Logga in
azra
/
angularjs-bootcamp-app
spegling av https://gitlab.com/azrazalea/angularjs-bootcamp-app
Bevaka 1
Stjärnmärk 0
Fork 0
Kod Ärenden 0 Incheckningar 38 Släpp 0 Wiki
Bläddra i källkod

More css tweaks

Lily Carpenter 10 år sedan
förälder
9ab307314a
incheckning
6caea8798c
2 ändrade filer med 29 tillägg och 5 borttagningar
Delad Vy Visa Diff Statistik
  1. 24 0
      www/css/app.css
  2. 5 5
      www/index.html

+ 24 - 0
www/css/app.css
Visa fil 

@@ -1,4 +1,26 @@
1 
+.new_note_form {
2 
+  margin: 10px;
3 
+  padding: 5px;
4 
+  background-color: lightgrey;
5 
+  color: navy;
6 
+  border-color: black;
7 
+  border: 1px solid;
8 
+  text-align: center;
9 
+  margin-left: auto;
10 
+  margin-right: auto;
11 
+  width: 300px;
12 
+}
13 
+
14 
+h1 {
15 
+  text-align: center;
16 
+}
17 
+
18 
+.new_note_form h2 {
19 
+  margin-top: 0px;
20 
+}
21 
+
1 22 
 .note {
23 
+  float: left;
2 24 
   margin: 10px;
3 25 
   padding: 5px;
4 26 
   background-color: lightgrey;
 
@@ -13,7 +35,9 @@
13 35 
 }
14 36
15 37 
 .note .body {
38 
+  padding: 3px;
16 39 
   background-color: grey;
40 
+  color: white;
17 41 
 }
18 42
19 43 
 .note h3 {

+ 5 - 5
www/index.html
Visa fil 

@@ -6,17 +6,17 @@
6 6 
   <body>
7 7 
     <div ng-controller="NoteCtrl">
8 8 
       <h1>Notes</h1>
9 
-      <div class="note" ng-repeat="note in notes">
10 
-        <h3>{{note.title}}</h3>
11 
-        <p class="date" ng-if="note.createdDate">Created: {{note.createdDate | date:'medium'}}</p>
12 
-        <p class="body">{{note.body}}</p>
13 
-      </div>
14 9 
       <div class="new_note_form">
15 10 
         <h2>New note </h2>
16 11 
         <p><input ng-model="newNote.title" /></p>
17 12 
         <p><textarea ng-model="newNote.body"></textarea></p>
18 13 
         <p><input type="submit" ng-click="createNote(newNote)" /></p>
19 14 
       </div>
15 
+      <div class="note" ng-repeat="note in notes">
16 
+        <h3>{{note.title}}</h3>
17 
+        <p class="date" ng-if="note.createdDate">Created: {{note.createdDate | date:'medium'}}</p>
18 
+        <p class="body">{{note.body}}</p>
19 
+      </div>
20 20 
     </div>
21 21 
     <script src="lib/angular/angular.js"></script>
22 22 
     <script src="js/app.js"></script>