for online publishing

sf-wdi-gaia · Oct 20, 2016 · a6d51a8 · a6d51a8
1 parent b6303be
commit a6d51a8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -4,18 +4,20 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <base href="/angular-books-crud-lab/">
+
     <title>bookApp</title>
 
     <!-- STYLESHEETS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/styles/styles.css">
+    <link rel="stylesheet" href="styles/styles.css">
 
     <!-- VENDOR SCRIPTS -->
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
 
     <!-- APPLICATION SCRIPTS -->
-    <script src="/app.js"></script>
+    <script src="app.js"></script>
     <!-- <script type="text/javascript" src="controllers/BooksIndexController.js"></script>
     <script type="text/javascript" src="controllers/BooksShowController.js"></script> -->
 

diff --git a/styles/styles.css b/styles/styles.css
@@ -2,8 +2,19 @@ body {
   background: rgba(135, 110, 60, 0.3);
 }
 
-.thumbnail {
-  margin: 1em 1em 1em 1em;
+.image-block {
+  /*margin: 1em 1em 1em 1em;*/
+  background: #fff;
+  width: 94%;
+  padding: 15px 0;
+  margin: 0 3% 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.img-centered {
+  display: block;
+  margin: 0 auto;
 }
 
 .img-limit {
@@ -14,3 +25,11 @@ body {
   background: #f2f2f2;
   margin: auto;
 }
+
+@media only screen and (max-width: 480px) {
+  .image-block {
+    width: 76%;
+    padding: 5px 0;
+    margin: 0 auto;
+  }
+}
diff --git a/templates/books.html b/templates/books.html
@@ -59,8 +59,9 @@
         <div class="panel-body">
 
           <div class='row'>
-            <div class="col-md-9 col-xs-11 thumbnail">
-              <img class="img-limit"src={{book.image}}>
+            <div class="image-block">
+            <!-- <div class="col-md-9 col-xs-12 thumbnail"> -->
+              <img class="img-limit img-centered"src={{book.image}}>
             </div>
 
             <div class="col-md-9 col-xs-12">