fix css classes, add simple.html

samuelcolvin · samuelcolvin · commit 524690935083 · 2018-01-22T13:25:01.000Z
diff --git a/config-overrides.js b/config-overrides.js
@@ -48,6 +48,13 @@ module.exports = function override (config, env) {
         filename: 'foobar/index.html'
       })
     )
+    config.plugins.splice(2, 0,
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: path.resolve(__dirname, 'public', 'simple.html'),
+        filename: 'simple.html'
+      })
+    )
   }
   // console.dir(config, { depth: 10, colors: true })
   return config
diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,8 @@
   </head>
   <body>
     <main>
-      <a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a>
+      <p><a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a></p>
+      <p><a href="/simple.html">view simple socket panel</a></p>
       <p>mode defined by options:</p>
       <div id="socket1"></div>
       <p>Grid mode:</p>
@@ -39,7 +40,7 @@
   <script>
     var public_key = '9c79f14df986a1ec693c'  // '61e9d8d03109e44d7c67'
     var api_root = null  // 'https://socket-beta.tutorcruncher.com' 'http://localhost:8000'
-    var socket1 = socket(public_key, {
+    window.socket = socket(public_key, {
       element: '#socket1',
       router_mode: 'history',
       api_root: api_root,
diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
@@ -7,7 +7,7 @@ export const Grid = ({contractors, root}) => (
   <div className="tcs-flex">
     {contractors.map((contractor, i) => (
       <div key={i} className="tcs-col">
-        <Link to={root.url(contractor.link)} className="tcs-box">
+        <Link to={root.url(contractor.link)} className="tcs-item tcs-box">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <h3 className="tcs-name">{contractor.name}</h3>
         </Link>
@@ -19,7 +19,7 @@ export const Grid = ({contractors, root}) => (
 export const List = ({contractors, root}) => (
   <div className="tcs-list">
     {contractors.map((contractor, i) => (
-      <Link key={i} to={root.url(contractor.link)} className="tcs-box">
+      <Link key={i} to={root.url(contractor.link)} className="tcs-item">
         <div className="tcs-image-col">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <button className="tcs-button">
@@ -38,7 +38,7 @@ export const List = ({contractors, root}) => (
           </div>
         </div>
 
-        <div className="tcs-box-extra">
+        <div className="tcs-list-extra">
           <Stars contractor={contractor} root={root}/>
 
           <div className="tcs-location">
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
@@ -26,7 +26,7 @@
   }
 }
 
-.tcs-box {
+.tcs-item {
   text-decoration: none;
   user-select: none;
   h3.tcs-name {
diff --git a/src/styles/grid.scss b/src/styles/grid.scss
@@ -11,7 +11,7 @@
 .tcs-flex {
   display: flex;
   flex-wrap: wrap;
-  .tcs-box {
+  .tcs-item {
     display: block;
     border-radius: $border-radius;
     background-color: #005377;
@@ -39,7 +39,7 @@
   .tcs-col {
     padding: 10px 2px 20px;
   }
-  .tcs-box {
+  .tcs-item {
     width: 140px;
   }
 }
diff --git a/src/styles/list.scss b/src/styles/list.scss
@@ -2,7 +2,7 @@
 $box-height: 186px;
 
 .tcs-list {
-  .tcs-box {
+  .tcs-item {
     box-sizing: content-box;
     color: #444;
     padding: 15px 0;
@@ -42,12 +42,12 @@ $box-height: 186px;
                     rgba(255, 255, 255, 1) 100%
     );
   }
+}
 
-  .tcs-box-extra {
-    display: grid;
-    grid-template-rows: 100px 1fr auto;
-    .tcs-stars {
-      grid-row: span 2;
-    }
+.tcs-list-extra {
+  display: grid;
+  grid-template-rows: 100px 1fr auto;
+  .tcs-stars {
+    grid-row: span 2;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,13 @@ module.exports = function override (config, env) {`
`48`	`48`	`filename: 'foobar/index.html'`
`49`	`49`	`})`
`50`	`50`	`)`
	`51`	`+ config.plugins.splice(2, 0,`
	`52`	`+ new HtmlWebpackPlugin({`
	`53`	`+ inject: true,`
	`54`	`+ template: path.resolve(__dirname, 'public', 'simple.html'),`
	`55`	`+ filename: 'simple.html'`
	`56`	`+ })`
	`57`	`+ )`
`51`	`58`	`}`
`52`	`59`	`// console.dir(config, { depth: 10, colors: true })`
`53`	`60`	`return config`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`
`29`		`-.tcs-box {`
	`29`	`+.tcs-item {`
`30`	`30`	`text-decoration: none;`
`31`	`31`	`user-select: none;`
`32`	`32`	`h3.tcs-name {`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`.tcs-flex {`
`12`	`12`	`display: flex;`
`13`	`13`	`flex-wrap: wrap;`
`14`		`- .tcs-box {`
	`14`	`+ .tcs-item {`
`15`	`15`	`display: block;`
`16`	`16`	`border-radius: $border-radius;`
`17`	`17`	`background-color: #005377;`
`@@ -39,7 +39,7 @@`
`39`	`39`	`.tcs-col {`
`40`	`40`	`padding: 10px 2px 20px;`
`41`	`41`	`}`
`42`		`- .tcs-box {`
	`42`	`+ .tcs-item {`
`43`	`43`	`width: 140px;`
`44`	`44`	`}`
`45`	`45`	`}`