Просмотр исходного кода

Summary page small visual fixes, disables hover on item lists where not necessary

George Vrancianu 8 лет назад
Родитель
Сommit
ac2ba3a0fa

+ 1 - 2
src/components/App/App.scss

@@ -440,9 +440,8 @@ button {
 :global(.items-list) {
   :global(.item) {
     display: flex;
-    padding: 8px 0;
+    padding: 8px;
     border-bottom: 1px solid $gray-light;
-    padding-left: 16px;
     &:first-child {
       border-top: 1px solid $gray-light;
     }

+ 3 - 0
src/components/WizardNetworks/WizardNetworks.scss

@@ -43,6 +43,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           }
         }
       }
+      &:hover {
+        background: transparent;
+      }
     }
   }
 }

+ 7 - 1
src/components/WizardSchedule/WizardSchedule.scss

@@ -18,7 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 @import '../variables.scss';
 
 .root {
-
+  :global(.items-list) {
+    :global(.item) {
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
 }
 .addScheduleBtn {
   display: block;

+ 6 - 9
src/components/WizardSummary/WizardSummary.js

@@ -34,7 +34,6 @@ class WizardSummary extends Component {
   static propTypes = {
     setWizardState: PropTypes.func,
     summary: PropTypes.object,
-
   }
 
   constructor(props) {
@@ -75,7 +74,8 @@ class WizardSummary extends Component {
             {this.dateTypes.indexOf(item.type) == -1 ? item.type : moment(item.date).format("MMM Do YYYY")}
           </span>
           <span className="cell">
-            {item.hour.label + ":" + item.minute.label + " " + item.tod + " " + item.timezone}
+            {item.type != "Execute Now" &&
+              (item.hour.label + ":" + item.minute.label + " " + item.tod + " " + item.timezone)}
           </span>
         </div>
       ), this)
@@ -86,11 +86,8 @@ class WizardSummary extends Component {
           <TextTruncate line={1} text={vm.name} truncateText="..." />
         </span>
         <span className="cell">
-          {vm.num_cpu} vCPU | {vm.memory_mb} MB RAM
+          {vm.num_cpu} vCPU | {vm.memory_mb} MB RAM {vm.flavor_name && ("| " + vm.flavor_name)}
         </span>
-        {/*            <span className="cell">
-         {vm.status}
-         </span>*/}
       </div>
     ))
 
@@ -130,15 +127,15 @@ class WizardSummary extends Component {
                 <div className={s.row}>
                   <span>Source: <br /> </span>
                   <span>
-                    <span className={s.cloudBox}>{this.props.summary.sourceCloud.name}</span>
                     <TextTruncate line={1} text={this.props.summary.sourceCloud.credential.name} truncateText="..." />
+                    <span className={s.cloudBox}>{this.props.summary.sourceCloud.name}</span>
                   </span>
                 </div>
                 <div className={s.row}>
                   <span>Target:</span>
                   <span>
-                    <span className={s.cloudBox}>{this.props.summary.targetCloud.name}</span>
                     <TextTruncate line={1} text={this.props.summary.targetCloud.credential.name} truncateText="..." />
+                    <span className={s.cloudBox}>{this.props.summary.targetCloud.name}</span>
                   </span>
                 </div>
               </div>
@@ -161,7 +158,7 @@ class WizardSummary extends Component {
               <h3>
                 Schedule
               </h3>
-              <div className={s.instances + " items-list"}>
+              <div className={s.schedules + " items-list"}>
                 {schedules}
               </div>
             </div>

+ 20 - 4
src/components/WizardSummary/WizardSummary.scss

@@ -70,6 +70,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 .networks {
   :global(.item) {
     color: $black;
+    padding: 8px 0;
     :global(.cell) {
       &:nth-child(1) {
         flex: 10;
@@ -85,6 +86,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         display: block;
       }
     }
+    &:hover {
+      background: transparent;
+    }
   }
 }
 .cloudBox {
@@ -105,25 +109,37 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 }
 .instances {
   :global(.item) {
+    flex-direction: column;
+    padding: 0px 0px 16px;
+    border: 0 !important;
     :global(.cell){
       &:nth-child(1) {
         color: $black;
-        width:50%;
-        margin-right: 4px;
+        width:100%;
         display: block;
       }
       &:nth-child(2) {
-        width:50%;
+        width:100%;
+        font-size: 80%;
+        padding-top: 4px;
       }
       &:nth-child(3) {
         color: $blue;
         flex: 1;
       }
     }
+    &:hover {
+      background: transparent;
+    }
   }
 }
 .schedules {
-
+  :global(.item) {
+    padding: 8px 0;
+    &:hover {
+      background: transparent;
+    }
+  }
 }
 .migrationType {
   line-height: 20px;