Use a consistent naming style for DOM IDs

1 files changed, 38 insertions, 38 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 86aae2d..87f599c 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -121,23 +121,23 @@ div#disabled {
 }
 
 /* modal screens*/
-#screen_login, #screen_signup, #screen_change_pass, #screen_settings, #screen_upgrade_to_aai {
+#screen-login, #screen-signup, #screen-change-pass, #screen-settings, #screen-upgrade-to-aai {
     padding: 15px 0;
 }
 
-#screen_login div.login-failed {
+#screen-login div.login-failed {
     color: red;
 }
 
 /* screen language */
-#screen_language {
+#screen-language {
     margin-top: 4em;
     margin-bottom: 4em;
 }
-#screen_language .col-lg-4 {
+#screen-language .col-lg-4 {
     cursor: pointer;
 }
-#screen_language .col-lg-4 a {
+#screen-language .col-lg-4 a {
     color: inherit;
     text-decoration: none;
 }
@@ -254,7 +254,7 @@ h2.group-title a.view-solutions {
 }
 
 /* robot connection & sensor info */
-#screen_robot .block3 .status {
+#screen-robot .block3 .status {
     background-color: #666;
     border: 1px solid #444;
     color: yellow;
@@ -297,36 +297,36 @@ h2.group-title a.view-solutions {
 
     /* prolog */
     /* code_editor */
-    .line-layout#screen_prolog .block.block2 {
+    .line-layout#screen-prolog .block.block2 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
     /* console */
-    .line-layout#screen_prolog .block.block3 {
+    .line-layout#screen-prolog .block.block3 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
 
     /* python */
     /* code_editor */
-    .line-layout#screen_python .block.block2 {
+    .line-layout#screen-python .block.block2 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
     /* console */
-    .line-layout#screen_python .block.block3 {
+    .line-layout#screen-python .block.block3 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
 
     /* robot */
     /* code_editor */
-    .line-layout#screen_robot .block.block2 {
+    .line-layout#screen-robot .block.block2 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
     /* console */
-    .line-layout#screen_robot .block.block3 {
+    .line-layout#screen-robot .block.block3 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
@@ -338,73 +338,73 @@ h2.group-title a.view-solutions {
     }
 
     /* prolog */
-    .quadrants.square-layout#screen_prolog > * > .block {
+    .quadrants.square-layout#screen-prolog > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
     /* instructions+hints */
-    .square-layout#screen_prolog .block-left {
+    .square-layout#screen-prolog .block-left {
         min-width: 33%; width: 33%;
     }
     /* code_editor + console */
-    .square-layout#screen_prolog .block-right {
+    .square-layout#screen-prolog .block-right {
         min-width: 67%; width: 67%;
     }
     /* code_editor */
-    .square-layout#screen_prolog .block.block2 {
+    .square-layout#screen-prolog .block.block2 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
     /* console */
-    .square-layout#screen_prolog .block.block3 {
+    .square-layout#screen-prolog .block.block3 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
 
     /* python */
-    .quadrants.square-layout#screen_python.prof2 > * > .block {
+    .quadrants.square-layout#screen-python.prof2 > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
     /* instructions+hints */
-    .square-layout#screen_python .block-left {
+    .square-layout#screen-python .block-left {
         min-width: 33%; width: 33%;
     }
     /* code_editor + console */
-    .square-layout#screen_python .block-right {
+    .square-layout#screen-python .block-right {
         min-width: 67%; width: 67%;
     }
     /* code_editor */
-    .square-layout#screen_python .block.block2 {
+    .square-layout#screen-python .block.block2 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
     /* console */
-    .square-layout#screen_python .block.block3 {
+    .square-layout#screen-python .block.block3 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
 
     /* robot */
-    .quadrants.square-layout#screen_robot.prof2 > * > .block {
+    .quadrants.square-layout#screen-robot.prof2 > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
     /* instructions+hints */
-    .square-layout#screen_robot .block-left {
+    .square-layout#screen-robot .block-left {
         min-width: 33%; width: 33%;
     }
     /* code_editor + console */
-    .square-layout#screen_robot .block-right {
+    .square-layout#screen-robot .block-right {
         min-width: 67%; width: 67%;
     }
     /* code_editor */
-    .square-layout#screen_robot .block.block2 {
+    .square-layout#screen-robot .block.block2 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
     /* console */
-    .square-layout#screen_robot .block.block3 {
+    .square-layout#screen-robot .block.block3 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
@@ -449,7 +449,7 @@ h2.group-title a.view-solutions {
 /* xs & sm */
 @media (max-width: 991px) {
     /*layout selection is  disable on small screens*/
-    #gui_layout_select_form_group {
+    #settings-layout-group {
         display: none;
     }
 }
@@ -510,45 +510,45 @@ ul.dropdown-menu a {
 }
 
 /* main screen */
-#screen_language a {
+#screen-language a {
     cursor: pointer;
 }
 
 /* problem index screen */
-#screen_problem_list .language-description {
+#screen-problem-list .language-description {
     margin-bottom: 1em;
 }
 
-#screen_problem_list .group-description {
+#screen-problem-list .group-description {
     margin-bottom: 0.5em;
 }
 
-#screen_problem_list h2 {
+#screen-problem-list h2 {
     font-size: 1.4em;
     font-weight: bold;
 }
 
-#screen_problem_list ul.group-problems {
+#screen-problem-list ul.group-problems {
     padding-left: 1em;
 }
 
-#screen_problem_list ul.group-problems li {
+#screen-problem-list ul.group-problems li {
     list-style-type: none;
 }
 
-#screen_problem_list a {
+#screen-problem-list a {
     cursor: pointer;
 }
 
-#screen_problem_list ul.group-problems a::before {
+#screen-problem-list ul.group-problems a::before {
     color: gray;
     content: '○  ';  /* non-breaking spaces */
 }
-#screen_problem_list ul.group-problems a.attempted::before {
+#screen-problem-list ul.group-problems a.attempted::before {
     color: #e4c13b;
     content: '●  ';  /* non-breaking spaces */
 }
-#screen_problem_list ul.group-problems a.solved::before {
+#screen-problem-list ul.group-problems a.solved::before {
     color: #5baa5b;
     content: '●  ';  /* non-breaking spaces */
 }