responsive layout tweaks

client/assets/scss/components/card.scss

@@ -1,10 +1,10 @@
 
 .card {
   background: white;
-  margin: 0px 0px 20px 20px;
+  margin: 20px 0px 20px 0px;
   border-radius: 2px;
   box-shadow: 0px 1px 3px #cccccc;
-  padding: 20px;
+  padding: 15px;
 }
 
 .card-header {

client/assets/scss/components/neighbors.scss

@@ -16,9 +16,7 @@
 }
 
 .neighbors-quick-links {
-    margin-bottom: 0.75em; 
-    margin-top: -0.5em;
-
+    margin: -0.75em 0; 
     text-align: right;
     span {
       color: #888;

client/assets/scss/components/routes.scss

@@ -180,8 +180,7 @@ $labelOffsetEnd:   -30px;
 
 
 .routes-quick-links {
-    margin-bottom: 0.75em; 
-    margin-top: -0.5em;
+    margin: -0.75em 0; 
 
     text-align: right;
     span {
@@ -298,4 +297,20 @@ $labelOffsetEnd:   -30px;
     }
 }
 
+// Responsive tweaks: The awkward inbetween.
+@media (min-width: 1200px) and (max-width: 1258px) {
+  .details-main {
+    > .col-main {
+        width: 80%;
+        float: left;
+    }
+    > .col-aside-details {
+        width: 20%;
+        float: left;
+    }
+  }
+}
+
+
+
 

client/assets/scss/layouts/main.scss

@@ -66,11 +66,18 @@ body,
 }
 
 .page-sidebar {
-  flex: 0 0 220px;
+  flex: 0 0 195px;
   background: #272634;
   // border-left: 1px solid #ccc;
 }
 
+@media (min-width: 1300px) {
+ .page-sidebar {
+   flex: 0 0 230px;
+   background: #272634;
+ }
+}
+
 header {
   flex: none;
 }
@@ -112,6 +119,10 @@ header {
     
     margin-right: 0px;
     margin-top: 20px;
+
+    &.row {
+        margin: 0px;
+    }
 }
 
 

client/components/lookup/page.jsx

@@ -16,11 +16,11 @@ class _LookupView extends React.Component {
     }
 
     return (
-      <div className="lookup-container">
-       <div className="col-md-8">
+      <div className="lookup-container details-main">
+       <div className="col-main col-lg-9 col-md-12">
          <Lookup />
        </div>
-       <div className="col-md-4">
+       <div className="col-aside-details col-lg-3 col-md-12">
          <LookupSummary />
        </div>
       </div>

client/components/routeservers/page.jsx

@@ -47,7 +47,7 @@ class RouteserversPage extends React.Component {
         </PageHeader>
 
         <div className="row details-main">
-          <div className="col-lg-9 col-xs-12 col-md-8">
+          <div className="col-main col-lg-9 col-md-12">
             <div className="card">
               <SearchInput
                 value={this.props.filterValue}
@@ -59,7 +59,7 @@ class RouteserversPage extends React.Component {
 
             <Protocols protocol="bgp" routeserverId={this.props.params.routeserverId} />
           </div>
-          <div className="col-lg-3 col-md-4 col-xs-12">
+          <div className="col-lg-3 col-md-12 col-aside-details">
             <div className="card">
               <Status routeserverId={this.props.params.routeserverId}
                       cacheStatus={this.props.cacheStatus} />

client/components/routeservers/routes/page.jsx

@@ -145,7 +145,7 @@ class RoutesPage extends React.Component {
         <BgpAttributesModal />
 
         <div className="row details-main">
-          <div className="col-md-8">
+          <div className="col-main col-lg-9 col-md-12">
 
             <div className="card">
               <RelatedPeers peers={this.props.relatedPeers}
@@ -180,7 +180,7 @@ class RoutesPage extends React.Component {
             <RoutesLoadingIndicator />
 
           </div>
-          <div className="col-md-4">
+          <div className="col-lg-3 col-md-12 col-aside-details">
             <div className="card">
               <Status routeserverId={this.props.params.routeserverId}
                       cacheStatus={cacheStatus} />