PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

WIP home updates

Browse source
This commit is contained in:
Nad Chishtie 2019-02-01 18:07:51 +00:00
parent c899469168
commit e1e364f7c7
6 changed files with 231 additions and 322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

395
res/home.html
View file

@ -4,137 +4,178 @@
* voodoo where we have to set display: none by default * voodoo where we have to set display: none by default
*/ */
.mx_HomePage_header h1 { h1::after {
margin-left: 0px; content: "!";
margin-bottom: 0px;
margin-top: 20px;
margin-right: 20px;
color: #454545;
} }
.mx_HomePage_header h2 { .mx_Parent {
margin-left: 0px; display: -webkit-box;
margin-top: 5px; display: -webkit-flex;
margin-bottom: 20px; display: -ms-flexbox;
margin-right: 20px; display: flex;
color: #454545; -webkit-box-orient: vertical;
} -webkit-box-direction: normal;
-webkit-flex-direction: column;
.mx_HomePage_header h1 a { -ms-flex-direction: column;
color: #454545; flex-direction: column;
} -webkit-box-pack: center;
-webkit-justify-content: center;
.mx_HomePage h3 { -ms-flex-pack: center;
margin-top: 30px; justify-content: center;
} -webkit-box-align: center;
-webkit-align-items: center;
.mx_HomePage_header { -ms-flex-align: center;
border: 1px solid #76CFA6;
background-color: #eaf5f0;
border-radius: 5px;
align-items: center; align-items: center;
}
.mx_HomePage_col {
display: flex;
flex-direction: row;
}
.mx_HomePage_toprow {
flex-wrap: wrap;
}
.mx_HomePage_row {
flex: 1 1 0;
margin-right: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.mx_HomePage_logo {
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 20px;
display: inline;
height: 100px;
}
.mx_HomePage_room {
cursor: pointer;
float: left;
text-decoration: none;
text-align: center; text-align: center;
padding-left: 10px; margin-top: 100px;
padding-right: 10px;
width: 120px;
} }
.mx_HomePage_toprow .mx_HomePage_room { .mx_Well {
width: 64px;
}
.mx_HomePage_room .mx_HomePage_icon {
border-radius: 50%;
width: 64px;
height: 64px;
}
.mx_HomePage_room .mx_HomePage_name {
display: block; display: block;
} -webkit-box-pack: center;
-webkit-justify-content: center;
.mx_HomePage_room .mx_HomePage_desc { -ms-flex-pack: center;
display: block; justify-content: center;
font-size: 12px; -webkit-flex-wrap: wrap;
margin-top: 8px; -ms-flex-wrap: wrap;
} flex-wrap: wrap;
-webkit-box-align: center;
.mx_HomePage_comment { -webkit-align-items: center;
display: flex; -ms-flex-align: center;
align-items: center; align-items: center;
margin-left: 100px; border-radius: 10px;
min-height: 64px; background-color: #F2F5F8;
} }
.mx_HomePage_container h3::after, .mx_ButtonParent {
.mx_HomePage_container h4::after { display: -webkit-box;
content: ":"; 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_container { .mx_ButtonRow {
display: block ! important; display: -webkit-box;
margin: 20px; 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_container h1, .mx_buttonheadline {
.mx_HomePage_container h2, margin-bottom: 14px;
.mx_HomePage_container h3,
.mx_HomePage_container h4 {
font-weight: 600;
} }
.mx_buttonicon {
width: 40px;
}
.mx_buttonlabel {
margin-left: 20px;
}
.mx_buttonwrappertext {
margin-bottom: 10px;
}
.mx_Header2 {
font-size: 32px;
font-weight: 400;
margin-top: 40px;
}
.mx_Header22 {
font-size: 14px;
font-weight: 200;
margin-bottom: 40px;
}
.mx_ButtonSignIn {
background: #368BD6;
color: white;
}
.mx_ButtonCreateAccount {
background: #03B381;
color: white;
}
.mx_secondarybutton {
background: #FFFFFF;
color: #2E2F32;
}
</style> </style>
<div class="mx_HomePage_container"> <div class="mx_Parent">
<div class="mx_HomePage_col mx_HomePage_header"> <a href="https://riot.im">
<a href="https://riot.im"><img src="home/images/logo.svg" class="mx_HomePage_logo"></a> <img src="home/images/logo.svg" alt="" class="mx_logo"/>
<div> </a>
<h1>_t("Welcome to Riot.im")</h1> <h1 class="mx_Header2">_t("Welcome to Riot.im")</h1>
<h2>_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h2> <h4 class="mx_Header22">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4>
<div class="mx_Well">
<div class="mx_ButtonRow">
<div class="mx_ButtonParent mx_ButtonSignIn">
<img src="home/images/icon-sign-in.svg" alt="" class="mx_buttonicon"/>
<div class="mx_buttonlabel">Sign In</div>
</div>
<div class="mx_ButtonParent mx_ButtonCreateAccount">
<img src="home/images/icon-create-account.svg" alt="" class="mx_buttonicon"/>
<div class="mx_buttonlabel">Create Account</div>
</div> </div>
</div> </div>
<div class="mx_HomePage_col mx_HomePage_toprow"> <div class="mx_ButtonRow">
<div class="mx_buttonwrapper">
<div class="mx_buttonwrappertext">Need help?</div>
<div class="mx_ButtonParent mx_secondarybutton">
<img src="home/images/icon-help.svg" alt="" class="mx_buttonicon"/>
<div class="mx_buttonlabel">Chat with Riot Bot</div>
</div>
</div>
<div class="mx_buttonwrapper">
<div class="mx_buttonwrappertext">Explore rooms</div>
<div class="mx_ButtonParent mx_secondarybutton">
<img src="home/images/icon-room-directory.svg" alt="" class="mx_buttonicon"/>
<div class="mx_buttonlabel">Room Directory</div>
</div>
</div>
</div>
</div>
<!-- <div class="mx_HomePage_well">
<div class="mx_HomePage_col">
<div class="mx_HomePage_row "> <div class="mx_HomePage_row ">
<div> <div>
<h3>_t("Search the room directory")</h3> <h3>_t("Search the room directory")</h3>
<a class="mx_HomePage_room" href="#/directory"> <a class="mx_HomePage_room" href="#/directory">
<img class="mx_HomePage_icon" src="home/images/icons-directory.svg"> <img class="mx_HomePage_icon" src="home/images/icons-directory.svg">
</a> </a>
<span class="mx_HomePage_comment">
_t("Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!")
</span>
</div> </div>
</div> </div>
<div class="mx_HomePage_row"> <div class="mx_HomePage_row">
@ -149,144 +190,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> -->
<h3>_t("General discussion about Matrix and Riot")</h3>
<div class="mx_HomePage_row">
<div class="mx_HomePage_room">
<a href="#/room/#matrix:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/matrix.png">
<span class="mx_HomePage_name">Matrix HQ</span>
</a>
<span class="mx_HomePage_desc">_t("Discussion of all things Matrix!")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#riot:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/riot.png">
<span class="mx_HomePage_name">Riot</span>
</a>
<span class="mx_HomePage_desc">_t("Riot/Web &amp; Desktop chat")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#riot-ios:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/riot-ios.png">
<span class="mx_HomePage_name">#riot-ios</span>
</a>
<span class="mx_HomePage_desc">_t("Riot/iOS &amp; matrix-ios-sdk chat")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#riot-android:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/riot-android.png">
<span class="mx_HomePage_name">#riot-android</span>
</a>
<span class="mx_HomePage_desc">_t("Riot/Android &amp; matrix-android-sdk chat")</span>
</div>
</div>
<h3>_t("Matrix technical discussions")</h3>
<h4>_t("Running Matrix services")</h4>
<div class="mx_HomePage_row">
<div class="mx_HomePage_room">
<a href="#/room/#synapse:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/matrix.png">
<span class="mx_HomePage_name">Synapse Support Community</span>
</a>
<span class="mx_HomePage_desc">_t("Community-run support for Synapse")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#dendrite:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/dendrite.png">
<span class="mx_HomePage_name">#dendrite:matrix.org</span>
</a>
<span class="mx_HomePage_desc">_t("Admin support for Dendrite")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#homeowners:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/homeowners.png">
<span class="mx_HomePage_name">Synapse Homeowners</span>
</a>
<span class="mx_HomePage_desc">_t("Announcements about Synapse releases")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#irc:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/irc.png">
<span class="mx_HomePage_name">IRC Matrix Bridges</span>
</a>
<span class="mx_HomePage_desc">_t("Support for those using and running matrix-appservice-irc")</span>
</div>
</div>
<h4>_t("Building services on Matrix")</h4>
<div class="mx_HomePage_row">
<div class="mx_HomePage_room">
<a href="#/room/#matrix-dev:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/matrix-dev.png">
<span class="mx_HomePage_name">#matrix-dev:matrix.org</span>
</a>
<span class="mx_HomePage_desc">_t("Support for those using the Matrix spec")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#e2e:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/e2e.png">
<span class="mx_HomePage_name">End-to-end crypto in Matrix</span>
</a>
<span class="mx_HomePage_desc">_t("Design and implementation of E2E in Matrix")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#vr:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/vr.png">
<span class="mx_HomePage_name">#vr:matrix.org</span>
</a>
<span class="mx_HomePage_desc">_t("Implementing VR services with Matrix")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#webrtc:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/webrtc.png">
<span class="mx_HomePage_name">#webrtc:matrix.org</span>
</a>
<span class="mx_HomePage_desc">_t("Implementing VoIP services with Matrix")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#matrix-identity:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/identity.jpg">
<span class="mx_HomePage_name">Matrix Identity</span>
</a>
<span class="mx_HomePage_desc">_t("Discussion of the Identity Service API")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#bridging:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/bridging.png">
<span class="mx_HomePage_name">Matrix Bridging</span>
</a>
<span class="mx_HomePage_desc">_t("Support for those using, running and writing other bridges")</span>
</div>
</div>
<h4>_t("Contributing code to Matrix and Riot")</h4>
<div class="mx_HomePage_row">
<div class="mx_HomePage_room">
<a href="#/room/#riot-dev:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/riot-dev.png">
<span class="mx_HomePage_name">#riot-dev</span>
</a>
<span class="mx_HomePage_desc">_t("Dev chat for the Riot/Web dev team")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#dendrite-dev:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/dendrite-dev.png">
<span class="mx_HomePage_name">#dendrite-dev</span>
</a>
<span class="mx_HomePage_desc">_t("Dev chat for the Dendrite dev team")</span>
</div>
<div class="mx_HomePage_room">
<a href="#/room/#riotweb-translations:matrix.org">
<img class="mx_HomePage_icon" src="home/rooms/riot-translations.png">
<span class="mx_HomePage_name">Riot Translations</span>
</a>
<span class="mx_HomePage_desc">_t("Co-ordination for Riot translators")</span>
</div>
</div>
</div>

17
res/home/images/icon-create-account.svg Normal file
View file

@ -0,0 +1,17 @@
<svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Home" transform="translate(-880.000000, -478.000000)" stroke="#FFFFFF" stroke-width="1.6">
<g id="Group-11" transform="translate(621.000000, 176.000000)">
<g id="Group-7-Copy" transform="translate(243.000000, 290.000000)">
<g id="user-plus" transform="translate(17.000000, 13.000000)">
<path d="M15,18 L15,16 C15,13.790861 13.209139,12 11,12 L4,12 C1.790861,12 2.22044605e-16,13.790861 0,16 L0,18" id="Path"></path>
<circle id="Oval" cx="7.5" cy="4" r="4"></circle>
<path d="M19,5 L19,11" id="Path"></path>
<path d="M22,8 L16,8" id="Path"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

16
res/home/images/icon-help.svg Normal file
View file

@ -0,0 +1,16 @@
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Home" transform="translate(-672.000000, -577.000000)" stroke="#000000" stroke-width="1.6">
<g id="Group-11" transform="translate(621.000000, 176.000000)">
<g id="Group-10" transform="translate(39.000000, 391.000000)">
<g id="help-circle" transform="translate(13.000000, 11.000000)">
<circle id="Oval" cx="10" cy="10" r="10"></circle>
<path d="M7.09,7 C7.57543688,5.62004444 8.98538362,4.79140632 10.4271763,5.0387121 C11.868969,5.28601788 12.9221794,6.53715293 12.92,8 C12.92,10 9.92,11 9.92,11" id="Path"></path>
<path d="M10,15 L10.0050017,15.0050017" id="Path"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

19
res/home/images/icon-room-directory.svg Normal file
View file

@ -0,0 +1,19 @@
<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Home" transform="translate(-880.000000, -581.000000)" stroke="#000000" stroke-width="1.6">
<g id="Group-11" transform="translate(621.000000, 176.000000)">
<g id="Group-8" transform="translate(243.000000, 391.000000)">
<g id="list" transform="translate(15.000000, 14.000000)">
<path d="M7,1 L20,1" id="Path"></path>
<path d="M7,7 L20,7" id="Path"></path>
<path d="M7,13 L20,13" id="Path"></path>
<path d="M2,1 L2.02063964,1.02063964" id="Path"></path>
<path d="M2,7 L2,7.03169624" id="Path"></path>
<path d="M2,13 L2,13.0336048" id="Path"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

16
res/home/images/icon-sign-in.svg Normal file
View file

@ -0,0 +1,16 @@
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Home" transform="translate(-673.000000, -478.000000)" stroke="#FFFFFF" stroke-width="1.6">
<g id="Group-11" transform="translate(621.000000, 176.000000)">
<g id="Group-7" transform="translate(40.000000, 283.000000)">
<g id="log-in" transform="translate(13.000000, 20.000000)">
<path d="M12,0 L16,0 C17.1045695,0 18,0.8954305 18,2 L18,16 C18,17.1045695 17.1045695,18 16,18 L12,18" id="Path"></path>
<polyline id="Path" points="7 14 12 9 7 4"></polyline>
<path d="M12,9 L0,9" id="Path"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,000 B

82
res/home/images/logo.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB