From e1e364f7c717fb04fe9e670a96cf2a54f924f1ad Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Fri, 1 Feb 2019 18:07:51 +0000 Subject: [PATCH 1/5] WIP home updates --- res/home.html | 395 +++++++++--------------- res/home/images/icon-create-account.svg | 17 + res/home/images/icon-help.svg | 16 + res/home/images/icon-room-directory.svg | 19 ++ res/home/images/icon-sign-in.svg | 16 + res/home/images/logo.svg | 90 +----- 6 files changed, 231 insertions(+), 322 deletions(-) create mode 100644 res/home/images/icon-create-account.svg create mode 100644 res/home/images/icon-help.svg create mode 100644 res/home/images/icon-room-directory.svg create mode 100644 res/home/images/icon-sign-in.svg diff --git a/res/home.html b/res/home.html index d8238870e8..4ee8d8fd19 100644 --- a/res/home.html +++ b/res/home.html @@ -4,289 +4,190 @@ * voodoo where we have to set display: none by default */ -.mx_HomePage_header h1 { - margin-left: 0px; - margin-bottom: 0px; - margin-top: 20px; - margin-right: 20px; - color: #454545; +h1::after { + content: "!"; } -.mx_HomePage_header h2 { - margin-left: 0px; - margin-top: 5px; - margin-bottom: 20px; - margin-right: 20px; - color: #454545; +.mx_Parent { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + margin-top: 100px; } -.mx_HomePage_header h1 a { - color: #454545; +.mx_Well { + display: block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + border-radius: 10px; + background-color: #F2F5F8; } -.mx_HomePage h3 { - margin-top: 30px; +.mx_ButtonParent { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 10px 20px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + border-radius: 10px; + width: 140px; } -.mx_HomePage_header { - border: 1px solid #76CFA6; - background-color: #eaf5f0; - border-radius: 5px; - align-items: center; +.mx_ButtonRow { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 600px; + height: 120px; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } -.mx_HomePage_col { - display: flex; - flex-direction: row; +.mx_buttonheadline { + margin-bottom: 14px; } -.mx_HomePage_toprow { - flex-wrap: wrap; +.mx_buttonicon { + width: 40px; } -.mx_HomePage_row { - flex: 1 1 0; - margin-right: 20px; - display: flex; - flex-direction: row; - flex-wrap: wrap; +.mx_buttonlabel { + margin-left: 20px; } -.mx_HomePage_logo { - margin-top: 20px; - margin-left: 40px; - margin-right: 40px; - margin-bottom: 20px; - display: inline; - height: 100px; +.mx_buttonwrappertext { + margin-bottom: 10px; } -.mx_HomePage_room { - cursor: pointer; - float: left; - text-decoration: none; - text-align: center; - padding-left: 10px; - padding-right: 10px; - width: 120px; +.mx_Header2 { + font-size: 32px; + font-weight: 400; + margin-top: 40px; } -.mx_HomePage_toprow .mx_HomePage_room { - width: 64px; +.mx_Header22 { + font-size: 14px; + font-weight: 200; + margin-bottom: 40px; } - -.mx_HomePage_room .mx_HomePage_icon { - border-radius: 50%; - width: 64px; - height: 64px; +.mx_ButtonSignIn { + background: #368BD6; + color: white; } -.mx_HomePage_room .mx_HomePage_name { - display: block; +.mx_ButtonCreateAccount { + background: #03B381; + color: white; } -.mx_HomePage_room .mx_HomePage_desc { - display: block; - font-size: 12px; - margin-top: 8px; +.mx_secondarybutton { + background: #FFFFFF; + color: #2E2F32; } -.mx_HomePage_comment { - display: flex; - align-items: center; - margin-left: 100px; - min-height: 64px; -} - -.mx_HomePage_container h3::after, -.mx_HomePage_container h4::after { - content: ":"; -} - -.mx_HomePage_container { - display: block ! important; - margin: 20px; -} - -.mx_HomePage_container h1, -.mx_HomePage_container h2, -.mx_HomePage_container h3, -.mx_HomePage_container h4 { - font-weight: 600; -} -
-
- -
-

_t("Welcome to Riot.im")

-

_t("Decentralised, encrypted chat & collaboration powered by [matrix]")

-
-
-
-
-
-

_t("Search the room directory")

- - - - - _t("Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!") - +
+ + + +

_t("Welcome to Riot.im")

+

_t("Decentralised, encrypted chat & collaboration powered by [matrix]")

+
+
+
+ +
Sign In
+
+
+ +
Create Account
-
-
-

_t("Chat with Riot Bot")

- - - - - _t("Get started with some tips from Riot Bot!") - +
+
+
Need help?
+
+ +
Chat with Riot Bot
+
+
+
+
Explore rooms
+
+ +
Room Directory
+
-

_t("General discussion about Matrix and Riot")

-
-
- - - Matrix HQ - - _t("Discussion of all things Matrix!") -
-
- - - Riot - - _t("Riot/Web & Desktop chat") -
-
- - - #riot-ios - - _t("Riot/iOS & matrix-ios-sdk chat") -
-
- - - #riot-android - - _t("Riot/Android & matrix-android-sdk chat") -
-
-

_t("Matrix technical discussions")

-

_t("Running Matrix services")

- -
-
- - - Synapse Support Community - - _t("Community-run support for Synapse") + diff --git a/res/home/images/icon-create-account.svg b/res/home/images/icon-create-account.svg new file mode 100644 index 0000000000..c9d25f2fa9 --- /dev/null +++ b/res/home/images/icon-create-account.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/res/home/images/icon-help.svg b/res/home/images/icon-help.svg new file mode 100644 index 0000000000..dc96f8e0cf --- /dev/null +++ b/res/home/images/icon-help.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/res/home/images/icon-room-directory.svg b/res/home/images/icon-room-directory.svg new file mode 100644 index 0000000000..6f888611f1 --- /dev/null +++ b/res/home/images/icon-room-directory.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/res/home/images/icon-sign-in.svg b/res/home/images/icon-sign-in.svg new file mode 100644 index 0000000000..584b2f0add --- /dev/null +++ b/res/home/images/icon-sign-in.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/res/home/images/logo.svg b/res/home/images/logo.svg index a5f70e5e4c..79039b70d0 100644 --- a/res/home/images/logo.svg +++ b/res/home/images/logo.svg @@ -1,76 +1,16 @@ - - - - -New_logo - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + From 2411d5286b6d606bdfdeee11c81da83b1631abc4 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 1 Feb 2019 19:58:30 +0100 Subject: [PATCH 2/5] finish layout and add links to buttons --- res/home.html | 77 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 45 insertions(+), 32 deletions(-) diff --git a/res/home.html b/res/home.html index 4ee8d8fd19..dfb7bed8b8 100644 --- a/res/home.html +++ b/res/home.html @@ -66,8 +66,12 @@ h1::after { -webkit-align-items: center; -ms-flex-align: center; align-items: center; - border-radius: 10px; - width: 140px; + border-radius: 4px; + width: 150px; + background-repeat: no-repeat; + background-position: 10px center; + text-decoration: none; + color: #2e2f32 !important; } .mx_ButtonRow { @@ -75,8 +79,7 @@ h1::after { display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 600px; - height: 120px; + width: 480px; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; @@ -84,27 +87,28 @@ h1::after { -webkit-align-items: center; -ms-flex-align: center; align-items: center; + justify-content: space-between; + padding: 0 40px; + box-sizing: border-box; + margin: 28px 0; } .mx_buttonheadline { margin-bottom: 14px; } -.mx_buttonicon { - width: 40px; -} - .mx_buttonlabel { margin-left: 20px; } .mx_buttonwrappertext { + font-size: 13px; margin-bottom: 10px; } .mx_Header2 { font-size: 32px; - font-weight: 400; + font-weight: 600; margin-top: 40px; } @@ -115,20 +119,33 @@ h1::after { } .mx_ButtonSignIn { - background: #368BD6; - color: white; + background-color: #368BD6; + color: white !important; } .mx_ButtonCreateAccount { - background: #03B381; - color: white; + background-color: #03B381; + color: white !important; } .mx_secondarybutton { - background: #FFFFFF; + background-color: #FFFFFF; color: #2E2F32; } +.mx_Button_iconSignIn { + background-image: url('home/images/icon-sign-in.svg'); +} +.mx_Button_iconCreateAccount { + background-image: url('home/images/icon-create-account.svg'); +} +.mx_Button_iconHelp { + background-image: url('home/images/icon-help.svg'); +} +.mx_Button_iconRoomDirectory { + background-image: url('home/images/icon-room-directory.svg'); +} +
@@ -139,29 +156,25 @@ h1::after {

_t("Decentralised, encrypted chat & collaboration powered by [matrix]")

-
- -
Sign In
-
-
- -
Create Account
-
+ +
_t("Sign In")
+ + +
_t("Create Account")
+
-
Need help?
-
- -
Chat with Riot Bot
-
+
_t("Need help?")
+ +
_t("Chat with Riot Bot")
+
-
Explore rooms
-
- -
Room Directory
-
+
_t("Explore rooms")
+ +
_t("Room Directory")
+
From f22c02ecc6af64f734b14a9ee46488401906622a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 1 Feb 2019 20:00:13 +0100 Subject: [PATCH 3/5] update i18n --- src/i18n/strings/en_EN.json | 32 +++++++------------------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index fc4ebc57d2..9c467cfc2f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -10,30 +10,12 @@ "Dismiss": "Dismiss", "Welcome to Riot.im": "Welcome to Riot.im", "Decentralised, encrypted chat & collaboration powered by [matrix]": "Decentralised, encrypted chat & collaboration powered by [matrix]", - "Search the room directory": "Search the room directory", - "Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!": "Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!", + "Sign In": "Sign In", + "Create Account": "Create Account", + "Need help?": "Need help?", "Chat with Riot Bot": "Chat with Riot Bot", - "Get started with some tips from Riot Bot!": "Get started with some tips from Riot Bot!", - "General discussion about Matrix and Riot": "General discussion about Matrix and Riot", - "Discussion of all things Matrix!": "Discussion of all things Matrix!", - "Riot/Web & Desktop chat": "Riot/Web & Desktop chat", - "Riot/iOS & matrix-ios-sdk chat": "Riot/iOS & matrix-ios-sdk chat", - "Riot/Android & matrix-android-sdk chat": "Riot/Android & matrix-android-sdk chat", - "Matrix technical discussions": "Matrix technical discussions", - "Running Matrix services": "Running Matrix services", - "Community-run support for Synapse": "Community-run support for Synapse", - "Admin support for Dendrite": "Admin support for Dendrite", - "Announcements about Synapse releases": "Announcements about Synapse releases", - "Support for those using and running matrix-appservice-irc": "Support for those using and running matrix-appservice-irc", - "Building services on Matrix": "Building services on Matrix", - "Support for those using the Matrix spec": "Support for those using the Matrix spec", - "Design and implementation of E2E in Matrix": "Design and implementation of E2E in Matrix", - "Implementing VR services with Matrix": "Implementing VR services with Matrix", - "Implementing VoIP services with Matrix": "Implementing VoIP services with Matrix", - "Discussion of the Identity Service API": "Discussion of the Identity Service API", - "Support for those using, running and writing other bridges": "Support for those using, running and writing other bridges", - "Contributing code to Matrix and Riot": "Contributing code to Matrix and Riot", - "Dev chat for the Riot/Web dev team": "Dev chat for the Riot/Web dev team", - "Dev chat for the Dendrite dev team": "Dev chat for the Dendrite dev team", - "Co-ordination for Riot translators": "Co-ordination for Riot translators" + "Explore rooms": "Explore rooms", + "Room Directory": "Room Directory", + "Search the room directory": "Search the room directory", + "Get started with some tips from Riot Bot!": "Get started with some tips from Riot Bot!" } From acfe095710d908ae12e82eec0c8dc807b25eef08 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 1 Feb 2019 20:08:18 +0100 Subject: [PATCH 4/5] center vertically --- res/home.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/res/home.html b/res/home.html index dfb7bed8b8..f062265680 100644 --- a/res/home.html +++ b/res/home.html @@ -8,6 +8,13 @@ h1::after { content: "!"; } +.mx_HomePage_body { + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; +} + .mx_Parent { display: -webkit-box; display: -webkit-flex; @@ -27,7 +34,7 @@ h1::after { -ms-flex-align: center; align-items: center; text-align: center; - margin-top: 100px; + margin-bottom: 50px; } .mx_Well { From 87c193df1aafb9dfeca1f035869c578ee89c2a80 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 1 Feb 2019 20:11:33 +0100 Subject: [PATCH 5/5] remove commented out code and close root element --- res/home.html | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/res/home.html b/res/home.html index f062265680..254c2b4a2a 100644 --- a/res/home.html +++ b/res/home.html @@ -185,29 +185,4 @@ h1::after {
- - - - +