Home page company and user design changes

Check on Custom JS file.

1) Internal CSS has been moved to the already existing file Style.css
2) Testimonial has been changed to a single class.
3) Inline/excessive css has been removed.
4) Created and RTL css variant

Update custom.js

File formatting fix

Removed unused code.
Removed Inline Styling.

Text formatting

Formatting
Apply suggestions from code review

Co-authored-by: Allan Nordhøy <[email protected]>
Co-authored-by: Michal Čihař <[email protected]>

scripts/yarn-update

@@ -9,6 +9,9 @@ yarn upgrade-interactive
 
 # Clipboard
 cp node_modules/clipboard/dist/clipboard.min.js ../../weblate_web/static/vendor/clipboard.js
+cp node_modules/simpleslider-js/dist/simpleSlider.min.js ../../weblate_web/static/vendor/simpleSlider.min.js
+cp node_modules/simpleslider-js/dist/simpleSlider.min.css ../../weblate_web/static/vendor/simpleSlider.min.css
+
 
 # Source Sans/Code Pro fonts
 mkdir -p ../../weblate_web/static/font-source

scripts/yarn/package.json

@@ -5,6 +5,7 @@
   "license": "GPL-3.0+",
   "dependencies": {
     "clipboard": "^2.0.8",
+    "simpleslider-js": "^1.9.0",
     "source-code-pro": "2.38.0",
     "source-sans-pro": "3.6.0"
   }

scripts/yarn/yarn.lock

@@ -28,6 +28,11 @@ select@^1.1.2:
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
   integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
 
+simpleslider-js@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/simpleslider-js/-/simpleslider-js-1.9.0.tgz#f850e1d493968ccd1c9d91c15b1b53bbb32049a3"
+  integrity sha512-p2nzUx0/sAJldSDezLah0sAm8orHM+E6BsA/mTaCIPV0UrZj6ZIxKhwj5KF+4iu98gB0SqWBPhZE4hs4drDZrA==
+
 [email protected]:
   version "2.38.0"
   resolved "https://registry.yarnpkg.com/source-code-pro/-/source-code-pro-2.38.0.tgz#85c57689f7386bb9d0515fb00ba4845bfb7b485b"

weblate_web/static/custom.js

@@ -207,3 +207,12 @@ ready(() => {
 
   new ClipboardJS("[data-clipboard-text]");
 });
+
+if (typeof SimpleSlider === "function") {
+  new SimpleSlider(".page-slider", {
+    slidesPerView: {
+      850: 2,
+      1165: 3,
+    },
+  });
+}

weblate_web/static/style-rtl.css

@@ -4702,3 +4702,103 @@ a.invoice-link img {
 .payment-updated {
   display: flow-root;
 }
+
+/*Testimonial and Slider CSS*/
+
+.testimonial {
+  width: 365px;
+  border-radius: 30px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  margin-left: 10px;
+}
+
+.icon-review {
+  text-align: right;
+}
+.icon-review img {
+  margin-right: 50px;
+}
+.icon-review p {
+  margin-right: 35px;
+  margin-top: -25px;
+  width: 70%;
+  font-size: 15px;
+  line-height: 18px;
+  letter-spacing: 0.5px;
+  color: #2a3744;
+}
+
+.circle-user {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+  right: 32px;
+  margin-top: 20px;
+}
+.circle-user img {
+  margin: 0px;
+  border-radius: 50%;
+}
+
+.icon-user {
+  display: flex;
+  text-align: right;
+  padding-bottom: 25px;
+}
+.content-user {
+  margin-top: 20px;
+  margin-right: 45px;
+}
+.content-user a {
+  color: #1fa385;
+  line-height: 23px;
+  text-decoration: underline;
+}
+.content-logo {
+  margin: 0px !important;
+}
+
+.slider-slide {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.simple-slider {
+  height: 400px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev {
+  left: 11px !important;
+  background-position: left !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+  background: white !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next {
+  right: 4px !important;
+  background-position: right !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+  background: white !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next img {
+  padding: 18px;
+  margin: 0px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev img {
+  padding: 18px;
+  margin: 0px;
+}

weblate_web/static/style.css

@@ -4158,7 +4158,7 @@ input.fullwidth {
   }
 }
 
-/* About Us Weblate Team CSS */
+/* About Us Weblate Team */
 
 .content-p {
   width: 69%;
@@ -4693,3 +4693,103 @@ a.invoice-link img {
 .payment-updated {
   display: flow-root;
 }
+
+/*Testimonial and Slider CSS*/
+
+.testimonial {
+  width: 365px;
+  border-radius: 30px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  margin-left: 10px;
+}
+
+.icon-review {
+  text-align: left;
+}
+.icon-review img {
+  margin-left: 50px;
+}
+.icon-review p {
+  margin-left: 35px;
+  margin-top: -25px;
+  width: 70%;
+  font-size: 15px;
+  line-height: 18px;
+  letter-spacing: 0.5px;
+  color: #2a3744;
+}
+
+.circle-user {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+  left: 32px;
+  margin-top: 20px;
+}
+.circle-user img {
+  margin: 0px;
+  border-radius: 50%;
+}
+
+.icon-user {
+  display: flex;
+  text-align: left;
+  padding-bottom: 25px;
+}
+.content-user {
+  margin-top: 20px;
+  margin-left: 45px;
+}
+.content-user a {
+  color: #1fa385;
+  line-height: 23px;
+  text-decoration: underline;
+}
+.content-logo {
+  margin: 0px !important;
+}
+
+.slider-slide {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.simple-slider {
+  height: 400px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev {
+  left: 11px !important;
+  background-position: left !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+  background: white !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next {
+  right: 4px !important;
+  background-position: right !important;
+  border-radius: 50% !important;
+  width: 50px !important;
+  height: 50px !important;
+  background: white !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+.simple-slider .slider-btn.slider-btn-next img {
+  padding: 18px;
+  margin: 0px;
+}
+
+.simple-slider .slider-btn.slider-btn-prev img {
+  padding: 18px;
+  margin: 0px;
+}

weblate_web/templates/base.html

@@ -15,6 +15,11 @@
   <link rel="stylesheet" href="{% if LANGUAGE_BIDI %}{% static "style-rtl.css" %}{% else %}{% static "style.css" %}{% endif %}" />
 {% endcompress %}
 
+{% if request.resolver_match.url_name == 'home' %}
+<link rel="stylesheet" href="{% static 'vendor/simpleSlider.min.css' %}" />
+{% endif %}
+
+
   <link rel="stylesheet" href="https://s.weblate.org/cdn/font-source/source-sans-pro.css">
   <link rel="stylesheet" href="https://s.weblate.org/cdn/font-source/source-code-pro.css">
 
@@ -125,6 +130,10 @@
         {% include "snippets/languages.html" %}
     </section>
 
+{% if request.resolver_match.url_name == 'home' %}
+<script src="{% static 'vendor/simpleSlider.min.js' %}" /></script>
+{% endif %}
+
 {% compress js %}
 	<script src="{% static "vendor/clipboard.js" %}"></script>
 	<script src="{% static "custom.js" %}"></script>

weblate_web/templates/index.html

@@ -52,7 +52,12 @@ <h2 class="section-title hp-style">{% trans "Robust feature set" %}</h2>
                 <a class="button inline border rev" href="{% url 'features' %}">{% trans "Explore all features" %}</a>
             </div>
             <div class="wrap supporters">
-                <h2 class="section-title hp-style">{% trans "Users and Supporters" %}</h2>
+                <h2 class="section-title hp-style">{% trans "Companies using Weblate" %}</h2>
+                {% include "snippets/reviews.html" %}
+            </div>
+
+            <div class="wrap supporters">
+                <h2 class="section-title hp-style">{% trans "Supporters & open source projects" %}</h2>
                 {% include "snippets/users.html" %}
             </div>
     	</div>