recruit angel view- to refactor

MateuszNaKodach · Sep 20, 2024 · cfcc989 · cfcc989
1 parent 13b08ab
commit cfcc989
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/heroesofddd_rails_application/app/assets/stylesheets/creature_recruitment.scss b/heroesofddd_rails_application/app/assets/stylesheets/creature_recruitment.scss
@@ -11,7 +11,7 @@
 }
 
 .recruitment-component {
-  border: #831A1C 16px;
+  border: 16px solid #831A1C;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -84,10 +84,13 @@
   display: flex;
   padding-left: 1rem;
   padding-right: 1rem;
-  width: 250px;
   justify-content: space-between;
 }
 
+.controls__center {
+  width: 250px;
+}
+
 .creatures__count {
   * {
     color: #F8F0D6;
@@ -99,4 +102,55 @@
     padding-bottom: 0.4rem;
   }
   width: 100px;
+}
+
+.buttons {
+  margin-top: 1.4rem;
+  button {
+    all: unset;
+    cursor: pointer;
+  }
+  width: 240px;
+  display: flex;
+  justify-content: space-between;
+}
+
+
+//slider
+
+.creatures__count-slider {
+  padding-right: 1rem;
+  padding-left: 1rem;
+  padding-top: 1rem;
+}
+
+.slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 25px;
+  background: black;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #221811;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #221811;
+  cursor: pointer;
 }
diff --git a/heroesofddd_rails_application/app/views/heroes/creature_recruitment/dwellings/index.html.erb b/heroesofddd_rails_application/app/views/heroes/creature_recruitment/dwellings/index.html.erb
@@ -28,7 +28,9 @@
            <div class="count">2</div>
          </div>
        </div>
-       <div class="creatures__count__slider"></div>
+       <div class="creatures__count-slider">
+         <input type="range" min="1" max="3" value="2" class="slider">
+       </div>
      </div>
      <div class="cost-per-troop">
        <p>Total Cost</p>
@@ -44,7 +46,6 @@
        </div>
      </div>
      </div>
-   </div>
 
    <div class="buttons">
      <button class="select_all_buttons">
@@ -57,5 +58,6 @@
        <%= image_tag "button_cancel.png", alt: "Description of image", class: "button-image" %>
      </button>
    </div>
+   </div>
 
  </div>