Merge branch 'add-renting-soon-option' into 'master'

add segmented control for ad type selection

See merge request saburly/marketalarm/web!55

app/public/segment.css

@@ -0,0 +1,32 @@
+.ui-segment{
+	color: #02adba;
+	border: 1px solid #02adba;
+	border-radius: 4px;
+	display:inline-block;
+}
+.ui-segment span.option.active{
+	background-color: #02adba;
+	color: white;
+}
+.ui-segment span.option{
+	padding-left: 30px;
+	padding-right: 30px;
+	height: 35px;
+	text-align:center;
+	display:inline-block;
+	line-height: 35px;
+	margin: 0px;
+	float:left;
+	cursor:pointer;
+	border-right:1px solid #02adba;
+}
+.ui-segment span.option[disabled]{
+	color: gray;
+}
+
+.ui-segment span.option:last-child{
+	border-right: none;
+}
+.segment-select{
+	display:none;
+}

app/views/layout.ejs

@@ -19,6 +19,7 @@
   <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="/assets/main.css">
+  <link rel="stylesheet" href="/assets/segment.css">
 
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

app/views/realEstateType.ejs

@@ -1,23 +1,66 @@
+<br><br>
 <form method="POST" id="form-real-estate-type">
-<div class="row center-align">
+    <div class="center-align">
-  <div class="collection">
-    <% for(const realEstateType of realEstateTypes) { %>
 
-      <a href="#" class="waves-effect collection-item"
+        <div class="row">
-         style="color: #02adba"
+            <select class="segment-select">
-         id="<%= realEstateType.id %>"
+                <option value="1">Prodaja</option>
-         onclick="saveAndSubmit(this.id)"
+                <option value="2" disabled>Najam (uskoro)</option>
-      >
+            </select>
-        <%= realEstateType.title %>
+        </div>
-      </a>
 
-    <% } %>
+        <br>
-  </div>
+        <div class="collection">
-  <input type="hidden" name="realEstateType" id="realEstateType" />
+            <% for(const realEstateType of realEstateTypes) { %>
-</div>
+
+                <a class="waves-effect row collection-item"
+                   id="<%= realEstateType.id %>"
+                   href="#"
+                   style="color: #02adba"
+                   onclick="saveAndSubmit(this.id)"
+                >
+                    <span class="center-align"><%= realEstateType.title %></span>
+                </a>
+
+            <% } %>
+        </div>
+        <input type="hidden" name="realEstateType" id="realEstateType" />
+    </div>
 </form>
 
 <script>
+    (function($) {
+        $.fn.extend({
+            Segment: function() {
+                $(this).each(function() {
+                    const wrapper = $("<div>", { class: "ui-segment" });
+                    $(this)
+                        .find("option")
+                        .each(function(param, param2) {
+                            const isDisabled = $(param2).attr("disabled");
+                            const option = $("<span>", {
+                                class: "option",
+                                text:  $(this).text(),
+                                value: $(this).val(),
+                                disabled: isDisabled
+                            });
+                            if ($(this).is(":selected")) {
+                                option.addClass("active");
+                            }
+                            wrapper.append(option);
+                        });
+
+                    $(this).after(wrapper);
+                    $(this).hide();
+                });
+            }
+        });
+    })(jQuery);
+
+    $(document).ready(() => {
+        $(".segment-select").Segment();
+    });
+
   function saveAndSubmit(id) {
    $("#realEstateType").val(id);
    $("#form-real-estate-type").submit();