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

View file

@ -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 {

View file

@ -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

Width:  |  Height:  |  Size: 657 B

View file

@ -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 {

View file

@ -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),