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

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.30.2",
     "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.30.2"
   resolved "https://registry.yarnpkg.com/source-code-pro/-/source-code-pro-2.30.2.tgz#1577e4bc93d2399d271d00f8426a8cd1b7f86da2"

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

@@ -4694,3 +4694,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

@@ -4150,7 +4150,7 @@ input.fullwidth {
   }
 }
 
-/* About Us Weblate Team CSS */
+/* About Us Weblate Team */
 
 .content-p {
   width: 69%;
@@ -4685,3 +4685,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>