mirror of https://github.com/vector-im/riot-web
make left panel adapt to width
includes using flexbox in the room tile to avoid hardcoded widthpull/21833/head
parent
73ba837c26
commit
313956dd99
|
@ -15,24 +15,16 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_LeftPanel {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border-right: 1px solid $panel-divider-color;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container {
|
||||
display: flex;
|
||||
/* LeftPanel 260px */
|
||||
flex: 0 0 260px;
|
||||
min-width: 260px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
|
||||
/* TagPanel 70px + LeftPanel 260px */
|
||||
flex: 0 0 330px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container_collapsed {
|
||||
|
@ -42,7 +34,7 @@ limitations under the License.
|
|||
|
||||
.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
|
||||
/* TagPanel 70px + Collapsed LeftPanel 70px */
|
||||
flex: 0 0 140px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_hideButton {
|
||||
|
@ -57,6 +49,17 @@ limitations under the License.
|
|||
|
||||
}
|
||||
|
||||
.mx_LeftPanel {
|
||||
background-color: $secondary-accent-color;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border-right: 1px solid $panel-divider-color;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_AppTile_mini {
|
||||
height: 132px;
|
||||
}
|
||||
|
|
|
@ -68,19 +68,7 @@ limitations under the License.
|
|||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_LeftPanel {
|
||||
order: 1;
|
||||
background-color: $secondary-accent-color;
|
||||
flex: 0 0 260px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_LeftPanel.collapsed {
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_MatrixChat_middlePanel {
|
||||
order: 2;
|
||||
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
flex: 1;
|
||||
|
@ -102,8 +90,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MatrixChat .mx_RightPanel {
|
||||
order: 3;
|
||||
|
||||
flex: 0 0 235px;
|
||||
}
|
||||
|
||||
|
|
|
@ -29,7 +29,6 @@ limitations under the License.
|
|||
|
||||
.mx_RoomSubList_labelContainer {
|
||||
height: 31px; /* mx_RoomSubList_label height including border */
|
||||
width: 235px; /* LHS Panel width */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
@ -39,7 +38,6 @@ limitations under the License.
|
|||
color: $roomsublist-label-fg-color;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
width: 203px; /* padding + width = LHS Panel width */
|
||||
height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
|
||||
margin-left: 16px;
|
||||
padding-left: 16px; /* gutter */
|
||||
|
|
|
@ -15,9 +15,10 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomTile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 40px;
|
||||
margin: 0px 9px 0px 9px;
|
||||
|
||||
|
@ -31,26 +32,14 @@ limitations under the License.
|
|||
left: -12px;
|
||||
}
|
||||
|
||||
|
||||
.mx_RoomTile_nameContainer {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_avatar_container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_RoomTile_avatar {
|
||||
display: inline-block;
|
||||
flex: 0;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 14px;
|
||||
padding-right: 12px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_RoomTile_dm {
|
||||
|
@ -62,19 +51,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomTile_name {
|
||||
display: inline-block;
|
||||
flex: 1 5 auto;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
width: 165px;
|
||||
vertical-align: middle;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 3px;
|
||||
padding: 6px;
|
||||
color: $roomtile-name-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
@ -82,16 +65,11 @@ limitations under the License.
|
|||
/* color: rgba(69, 69, 69, 0.5); */
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomTile_nameContainer {
|
||||
width: 60px; /* colapsed panel width */
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomTile_name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomTile_badge {
|
||||
top: 0px;
|
||||
min-width: 12px;
|
||||
border-radius: 16px;
|
||||
padding: 0px 4px 0px 4px;
|
||||
|
@ -116,10 +94,9 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
display: inline-block;
|
||||
flex: 0 1 content;
|
||||
min-width: 15px;
|
||||
height: 15px;
|
||||
position: absolute;
|
||||
right: 8px; /*gutter */
|
||||
top: 9px;
|
||||
border-radius: 8px;
|
||||
|
|
Loading…
Reference in New Issue