Style adjustments.

b-bly · Dec 18, 2018 · 8ef0731 · 8ef0731
1 parent ac452c9
commit 8ef0731
Show file tree

Hide file tree

Showing 16 changed files with 314 additions and 262 deletions.
diff --git a/src/index.css b/src/index.css
@@ -16,7 +16,7 @@ html {
   margin-bottom: 1rem;
   margin-top: 1rem;
   box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3);
-  padding: 1rem 2rem;
+  /* padding: .4rem; */
 
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
@@ -33,7 +33,18 @@ html {
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
+}
+
+.card-left {
+  background-color: rgb(242, 242, 242);
+}
 
+.card-right {
+  flex: 1 1 auto;
+}
+
+.padding {
+  padding: .4rem;
 }
 
 .no-pointer {
@@ -94,17 +105,18 @@ html {
   font-size: 3rem!important;
 }
 
+.flex {
+  display: flex;
+}
 
 .flex-start {
   display: flex;
-  align-items: center;
   justify-content: flex-start;
 }
 
 
 .flex-end {
   display: flex;
-  align-items: center;
   justify-content: flex-end;
 }
 
@@ -140,6 +152,10 @@ html {
   justify-content: center;
 }
 
+p {
+  margin: 0 0 .1rem!important;
+}
+
 @media screen and (max-width: 700px) {
   .card {
     padding: .5rem;
@@ -160,3 +176,29 @@ html {
   }
 }
 
+@media only screen and (min-width: 992px) and (max-width: 1999px){ 
+
+}
+
+@media only screen and (max-width: 991px){ 
+
+}
+
+@media only screen and (max-width: 767px){ 
+  /* .font-size-1 {
+    font-size: 0.5rem!important;
+  } */
+  /* .font-size-2 {
+    font-size: .7rem!important;
+  } */
+  .font-size-3 {
+    font-size: 1.3rem!important;
+  }
+  .font-size-4 {
+    font-size: 1.5rem!important;
+  }
+}
+
+@media only screen and (max-width: 479px){ 
+
+}
diff --git a/src/index.js b/src/index.js
@@ -14,6 +14,7 @@ import 'spectre.css/dist/spectre.min.css';
 import 'spectre.css/dist/spectre-icons.css';
 import './index.css';
 import 'font-awesome/css/font-awesome.min.css'; 
+import './spectre-overrides.css'
 
 const middleware = [thunk]
 if (process.env.NODE_ENV !== 'production') {

diff --git a/src/scenes/injury-info/button.js b/src/scenes/injury-info/button.js
@@ -5,7 +5,8 @@ export default class Button extends Component {
         super(props);
         this.handleClick = this.handleClick.bind(this);
     }
-    handleClick() {
+    handleClick(e) {
+        e.preventDefault();
         this.props.data? this.props.handleClick(this.props.data) : this.props.handleClick();
     }
     render() {

diff --git a/src/scenes/injury-info/comments/comment-form.js b/src/scenes/injury-info/comments/comment-form.js
@@ -54,7 +54,7 @@ export default class CommentForm extends Component {
         return (
 
 
-            <div className="">
+            <div className="padding">
                 <form className="form-horizontal" onSubmit={this.handleSubmit}>
                     <div className="form-group col-12">
 

diff --git a/src/scenes/injury-info/index.js b/src/scenes/injury-info/index.js
@@ -16,28 +16,31 @@ class InjuryInfo extends Component {
 
         return (
             <div>
-                <div className="container">
+                <div className="">
                     <div className="columns">
                         <div className="col-6 col-mx-auto col-sm-12">
                             <div className="card">
-                                <div className="flex-start">
-                                    <div className="">
+                                <div className="flex-row">
+                                    <div className="card-left padding">
                                         <Link to='/'>
                                             <button className="btn btn-sm arrow-left" aria-label="back">
                                                 <i className="icon icon-arrow-left"></i>
                                             </button>
                                         </Link>
                                     </div>
-                                    <div className="">
-                                        <span className="card-title font-size-3">
-                                            &nbsp;
+
+                                    <div className="flex-start card-right padding flex-column">
+                                        <div className="title-container">
+                                            <span className="card-title font-size-3">
                                             {this.props.injuryInfo.title}
-                                        </span>
+                                            </span>
+                                        </div>
+                                        <div className="col-12 font-size-2">
+                                            {this.props.injuryInfo.description}
+                                        </div>
                                     </div>
                                 </div>
-                                <div className="col-12 font-size-2">
-                                    {this.props.injuryInfo.description}
-                                </div>
+
                                 {/* <div className="col-2 col-mr-auto">
 
                                 </div> */}

diff --git a/src/scenes/injury-info/styles.css b/src/scenes/injury-info/styles.css
@@ -9,18 +9,12 @@
   }
 
   .right-row-buttons {
-      margin-left: .5rem;
-      margin-bottom: .5rem;
-
-  }
-
- .upvotes-container {
-     margin: .5rem;
-     float: left;
- }
+    margin-left: .2rem;
+}
 
  .inline {
-     display: inline;
+     display: flex;
+     flex-direction: row;
      width: 100%;
  }
 

diff --git a/src/scenes/injury-info/treatments/add-treatment.js b/src/scenes/injury-info/treatments/add-treatment.js
@@ -110,22 +110,6 @@ class AddTreatmentForm extends Component {
                                 </div>
                             </div>
 
-                            {/* <div className="form-group flex-start">
-                                <div className="col-2 col-ml-auto">
-                                    <label className="form-label" htmlFor="name">Name of Treatment:</label>
-                                </div>
-                                <div className="col-4 col-mr-auto">
-                                    <input className="form-input font-size-1"
-                                        type="text"
-                                        id="name"
-                                        name="name"
-                                        placeholder="Name of treatment"
-                                        value={this.state.name}
-                                        onChange={this.handleChange}
-                                    />
-                                </div>
-                            </div> */}
-
                             <div className="form-group">
                                 <div className="col-7"></div>
                                 <input className="btn col-1"

diff --git a/src/scenes/injury-info/treatments/treatment-form.js b/src/scenes/injury-info/treatments/treatment-form.js
@@ -55,7 +55,7 @@ export default class TreatmentForm extends Component {
     render() {
 
         return (
-            <div >
+            <div className="padding">
                 {/* <h4>Add New Treatment to {this.props.injuryInfo.title}</h4> */}
 
                 <form className="form-horizontal" onSubmit={this.handleSubmit}>
@@ -89,19 +89,20 @@ export default class TreatmentForm extends Component {
                             />
                         </div>
                     </div>
-                    <div className="form-group ">
-                        <div className="col-8"></div>
-                        <input className="btn col-2"
+                    <div className="form-group flex-end">
+                        <div className="flex">
+                        <input className="btn"
                             type="button"
                             value="Cancel"
                             onClick={this.cancel}
                         ></input>
-                        &nbsp;
+                        <div>&nbsp;</div>
 								<input
-                            className="btn btn-primary col-2 "
+                            className="btn btn-primary"
                             type="submit"
                             value="Submit"
                         ></input>
+                        </div>
                     </div>
                 </form>