1
0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2025-01-11 12:37:22 +01:00

style room header

This commit is contained in:
Bruno Windels 2020-10-08 15:00:20 +02:00
parent 2cbe349a4d
commit 59802d1812
4 changed files with 23 additions and 25 deletions
src/ui/web
css
session/room

@ -24,13 +24,8 @@ limitations under the License.
align-items: center;
}
.RoomHeader > *:last-child {
margin-right: 0;
}
.RoomHeader > * {
margin-right: 10px;
flex: 0 0 auto;
.RoomHeader h2 {
flex: 1;
}
.RoomHeader button {

@ -0,0 +1,10 @@
<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#8D99A5"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
</clipPath>
</defs>
</svg>

After

(image error) Size: 657 B

@ -352,8 +352,11 @@ a {
}
.RoomHeader {
background: rgba(245, 245, 245, 0.90);
padding: 10px;
box-sizing: border-box;
height: 58px; /* 12 + 36 + 12 to align with filter field + margin */
background: white;
padding: 0 16px;
border-bottom: 1px solid rgba(245, 245, 245, 0.90);
}
.RoomHeader h2 {
@ -361,23 +364,13 @@ a {
font-weight: 600;
}
.RoomHeader button {
width: 40px;
height: 40px;
font-size: 1.5em;
padding: 0;
background: white;
border: none;
font-weight: bolder;
line-height: 40px;
.RoomHeader > :not(:first-child) {
margin-left: 8px;
}
.back::before {
content: "☰";
}
.more::before {
content: "⋮";
button.back {
background-image: url('icons/chevron-left.svg');
background-position-x: 10px;
}
.RoomHeader .topic {

@ -26,7 +26,7 @@ export class RoomView extends TemplateView {
return t.div({className: "RoomView"}, [
t.div({className: "TimelinePanel"}, [
t.div({className: "RoomHeader"}, [
t.button({className: "back", onClick: () => vm.close()}),
t.button({className: "utility back", onClick: () => vm.close()}),
renderAvatar(t, vm, 32),
t.div({className: "room-description"}, [
t.h2(vm => vm.name),