chore: website responsiveness

EvAlex · EvAlex · commit 3b70fe94e428 · 2017-08-06T11:26:14.000+02:00
diff --git a/README.md b/README.md
@@ -7,14 +7,42 @@ https://db-diagrams.firebaseapp.com/
 ## Installation
 
 1. Install NuGet package `EntityFrameworkCore.Diagrams`
-2. Add middleware in your `Startup.Configure()` method: `app.AddEfDiagrams<ApplicationDbContext>();`. Use it only in development mode (`if (env.IsDevelopment())`): you don't want everyone in public see your entire data structure :) Here's an example of how your code might may look like:
+2. Use `AddEfDiagrams()` extension method in `Configure()` method of your Startup class to add middleware. Specify your DbContext type instead of ApplicationDbContext in the following example: `app.AddEfDiagrams<ApplicationDbContext>();`
+Here's how your Configure() method might look like after this step (notice commented line):
   ```cs
-  if (env.IsDevelopment())
-  {
-      app.AddEfDiagrams<ApplicationDbContext>();
-  }
+public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
+{
+    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
+    loggerFactory.AddDebug();
+
+    if (env.IsDevelopment())
+    {
+        app.UseDeveloperExceptionPage();
+        app.UseBrowserLink();
+        app.AddEfDiagrams<ApplicationDbContext>();  //  <-- Here's the config for EntityFrameworkCore.Diargams
+    }
+    else
+    {
+        app.UseExceptionHandler("/Home/Error");
+    }
+
+    app.UseStaticFiles();
+
+    app.UseMvc(routes =>
+    {
+        routes.MapRoute(
+            name: "default",
+            template: "{controller=Home}/{action=Index}/{id?}");
+    });
+}
 ```
-3. Start your app and open `/db-diagrams` page. You should see yor entity model diagram.
+3. Start your app and browse to `/db-diagrams page`. You should see the diagram now.
+
+Notice that the middleware is added only in Development mode. This is important! Otherwise, any user in Production will se your model structure, which may not be desireable. This is not the case if you are developing public API, though.
+
 
+## Contributing
+Feel free to report any bugs or feature requests - just create an issue. Contributions are appreciated!
 
-Feel free to report any bugs or feature requests. Contributions are appreciated!
+## License
+MIT
diff --git a/website/src/app/components/footer/footer.component.scss b/website/src/app/components/footer/footer.component.scss
@@ -21,15 +21,18 @@ footer {
         .footer-logo {
             border-radius: 50%;
             overflow: hidden;
+            flex: 0 0 auto;
 
             img {
                 height: 50px;
             }
         }
 
         .footer-links {
+            min-width: 180px;
+
             @media (max-width: 488px) {
-                flex-basis: 80%;
+                // flex-basis: 80%;
             }
 
             ul {
@@ -58,6 +61,7 @@ footer {
             flex: 1;
             display: flex;
             justify-content: flex-end;
+            min-width: 180px;
         }
     }
 }
diff --git a/website/src/app/components/getting-started/getting-started.component.html b/website/src/app/components/getting-started/getting-started.component.html
@@ -12,7 +12,7 @@ <h2>Step 1: Install EntityFrameworkCore.Diagrams</h2>
         <h2>Step 2: Add middleware</h2>
         <p>Use <code>AddEfDiagrams()</code> extension method in <code>Configure()</code> method of your <code>Startup</code> class to add middleware. Specify your <code>DbContext</code> type instead of <code>ApplicationDbContext</code> in the following example:</p>
         <pre><code efdSyntaxHighlight="cs">app.AddEfDiagrams&lt;ApplicationDbContext&gt;();</code></pre>
-        <p>Here's how your <code>Configure()</code> method might look like after this step:</p>
+        <p>Here's how your <code>Configure()</code> method might look like after this step (notice highlighted line):</p>
         <pre><code efdSyntaxHighlight="cs">public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
 &#123;
     loggerFactory.AddConsole(Configuration.GetSection("Logging"));
@@ -22,7 +22,7 @@ <h2>Step 2: Add middleware</h2>
     &#123;
         app.UseDeveloperExceptionPage();
         app.UseBrowserLink();
-        app.AddEfDiagrams&lt;ApplicationDbContext&gt;();
+        <strong>app.AddEfDiagrams&lt;ApplicationDbContext&gt;();</strong>
     &#125;
     else
     &#123;
@@ -38,7 +38,6 @@ <h2>Step 2: Add middleware</h2>
             template: "&#123;controller=Home&#125;/&#123;action=Index&#125;/&#123;id?&#125;");
     &#125;);
 &#125;</code></pre>
-        <p>The only change to your existing code is one extra line: <code>app.AddEfDiagrams&lt;ApplicationDbContext&gt;();</code></p>
         <p>Notice that the middleware is added only in Development mode. This is important! Otherwise, any user in Production will se your model structure, which may not be desireable. This is not the case if you are developing public API, though.</p>
 
         <h2>Step 3: Start your app and see the diagram</h2>
diff --git a/website/src/app/components/getting-started/getting-started.component.scss b/website/src/app/components/getting-started/getting-started.component.scss
@@ -25,7 +25,7 @@ main {
         margin: 20px auto;
         max-width: 940px;
 
-        @media (max-width: 488px) {
+        @media (max-width: 972px) {
             margin: 16px;
         }
 
@@ -42,11 +42,13 @@ main {
 
         h2, p {
             color: rgba(0, 0, 0, 0.87);
+            overflow-x: auto;
         }
 
         pre,
         code {
             font-family: Roboto Mono,monospace;
+            white-space: pre;
         }
 
         pre {
@@ -58,9 +60,17 @@ main {
             padding: 20px;
             white-space: pre-wrap;
             font-size: 14px;
+            overflow-x: auto;
 
             code {
                 font-size: 90%;
+
+                strong {
+                    padding: 2px 8px;
+                    margin: 0 -8px;
+                    background: rgba(mat-color(map-get($efd-app-theme, primary)), 0.16);
+                    border-radius: 2px;
+                }
             }
         }
     }
diff --git a/website/src/app/components/homepage/homepage.component.scss b/website/src/app/components/homepage/homepage.component.scss
@@ -1,6 +1,8 @@
 @import '~@angular/material/theming';
 @import '../../../theme';
 
+$header-breakpoint: 503px;
+
 header {
     background: mat-color(map-get($efd-app-theme, primary));
     height: 300px;
@@ -10,7 +12,7 @@ header {
     text-align: center;
     color: rgba(255, 255, 255, 0.87);
 
-    @media (max-width: 488px) {
+    @media (max-width: $header-breakpoint) {
         padding-top: 8px;
     }
 
@@ -20,7 +22,7 @@ header {
         line-height: 56px;
         margin: 15px 0 15px 0;
 
-        @media (max-width: 488px) {
+        @media (max-width: $header-breakpoint) {
             margin-top: 0;
         }
     }
@@ -35,7 +37,7 @@ header {
     a {
         margin-top: 36px;
 
-        @media (max-width: 488px) {
+        @media (max-width: $header-breakpoint) {
             margin-top: 16px;
         }
     }
@@ -59,21 +61,13 @@ main {
                 justify-content: center;
                 box-sizing: border-box;
 
-                .img-container,
-                .text-container {
-                    max-width: 50%;
-                }
-
-                .img-container {
-
+                @media (max-width: 952px) {
+                    margin: 16px;
                 }
 
                 .text-container {
-
-                    @media (max-width: 488px) {
-                        flex: 1;
-                        max-width: none;
-                    }
+                    max-width: 450px;
+                    margin: auto;
 
                     h2 {
                         font-size: 25px;
@@ -83,7 +77,7 @@ main {
                     }
 
                     p {
-                            font-size: 16px;
+                        font-size: 16px;
                         font-weight: 400;
                         line-height: 28px;
                         margin: 0 0 24px 0;
diff --git a/website/src/app/components/navbar/navbar.component.html b/website/src/app/components/navbar/navbar.component.html
@@ -9,9 +9,12 @@
         <ng-content></ng-content>
     </span>
     <span>
-        <a href="https://github.com/EvAlex/ef-db-diagrams" target="_blank" md-button>
-            <img src="/assets/github-circle-white-transparent.svg" alt="GitHub" class="github-logo">
-            Github
+        <a class="github-logo" href="https://github.com/EvAlex/ef-db-diagrams" target="_blank" md-button>
+            <img src="/assets/github-circle-white-transparent.svg" alt="GitHub">
+            <span>Github</span>
+        </a>
+        <a class="github-logo-sm" href="https://github.com/EvAlex/ef-db-diagrams" target="_blank" md-icon-button>
+            <img src="/assets/github-circle-white-transparent.svg" alt="GitHub">
         </a>
     </span>
 </md-toolbar>
diff --git a/website/src/app/components/navbar/navbar.component.scss b/website/src/app/components/navbar/navbar.component.scss
@@ -1,33 +1,52 @@
 
-.title {
-    flex: 0 0 160px;
-    padding-left: 16px;
-    text-decoration: none;
-
-    img {
-        height: 32px;
-        vertical-align: middle;
-        margin-right: 8px;
-    }
+md-toolbar {
+    overflow-x: hidden;
 
-    span {
-        vertical-align: middle;
-    }
+    .title {
+        flex: 0 0 160px;
+        padding-left: 16px;
+        text-decoration: none;
+        margin-top: 1px;
+
+        img {
+            height: 32px;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
 
-    @media (max-width: 600px) {
-        flex: 0 0 120px;
+        span {
+            vertical-align: middle;
+        }
+
+        @media (max-width: 600px) {
+            flex: 0 0 120px;
+        }
     }
 
-    @media (max-width: 320px) {
-        flex: 0 0 96px;
+    .content {
+        flex: 1;
     }
-}
 
-.content {
-    flex: 1;
-}
+    .github-logo {
 
-.github-logo {
-    height: 21px;
-    margin: 0 7px 2px 0;
+        @media (max-width: 488px) {
+            display: none;
+        }
+
+        &-sm {
+            display: none;
+
+            @media (max-width: 488px) {
+                display: inline-block;
+            }
+        }
+    }
+
+    .github-logo,
+    .github-logo-sm {
+        img {
+            height: 22px;
+            margin: 0 6px;
+        }
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -21,15 +21,18 @@ footer {`
`21`	`21`	`.footer-logo {`
`22`	`22`	`border-radius: 50%;`
`23`	`23`	`overflow: hidden;`
	`24`	`+ flex: 0 0 auto;`
`24`	`25`
`25`	`26`	`img {`
`26`	`27`	`height: 50px;`
`27`	`28`	`}`
`28`	`29`	`}`
`29`	`30`
`30`	`31`	`.footer-links {`
	`32`	`+ min-width: 180px;`
	`33`	`+`
`31`	`34`	`@media (max-width: 488px) {`
`32`		`- flex-basis: 80%;`
	`35`	`+ // flex-basis: 80%;`
`33`	`36`	`}`
`34`	`37`
`35`	`38`	`ul {`
`@@ -58,6 +61,7 @@ footer {`
`58`	`61`	`flex: 1;`
`59`	`62`	`display: flex;`
`60`	`63`	`justify-content: flex-end;`
	`64`	`+ min-width: 180px;`
`61`	`65`	`}`
`62`	`66`	`}`
`63`	`67`	`}`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ main {`
`25`	`25`	`margin: 20px auto;`
`26`	`26`	`max-width: 940px;`
`27`	`27`
`28`		`- @media (max-width: 488px) {`
	`28`	`+ @media (max-width: 972px) {`
`29`	`29`	`margin: 16px;`
`30`	`30`	`}`
`31`	`31`
`@@ -42,11 +42,13 @@ main {`
`42`	`42`
`43`	`43`	`h2, p {`
`44`	`44`	`color: rgba(0, 0, 0, 0.87);`
	`45`	`+ overflow-x: auto;`
`45`	`46`	`}`
`46`	`47`
`47`	`48`	`pre,`
`48`	`49`	`code {`
`49`	`50`	`font-family: Roboto Mono,monospace;`
	`51`	`+ white-space: pre;`
`50`	`52`	`}`
`51`	`53`
`52`	`54`	`pre {`
`@@ -58,9 +60,17 @@ main {`
`58`	`60`	`padding: 20px;`
`59`	`61`	`white-space: pre-wrap;`
`60`	`62`	`font-size: 14px;`
	`63`	`+ overflow-x: auto;`
`61`	`64`
`62`	`65`	`code {`
`63`	`66`	`font-size: 90%;`
	`67`	`+`
	`68`	`+ strong {`
	`69`	`+ padding: 2px 8px;`
	`70`	`+ margin: 0 -8px;`
	`71`	`+ background: rgba(mat-color(map-get($efd-app-theme, primary)), 0.16);`
	`72`	`+ border-radius: 2px;`
	`73`	`+ }`
`64`	`74`	`}`
`65`	`75`	`}`
`66`	`76`	`}`