New layout/design

Two column layout and style tweaks. Templatized conversation views.
Generalized list view.
This commit is contained in:
lilia 2014-07-22 08:55:26 -10:00
parent 6d5e32bca8
commit def32f42d4
9 changed files with 203 additions and 91 deletions

View file

@ -3,14 +3,19 @@
position: relative;
min-height: 64px;
margin: auto;
padding: 1em;
border-radius: 10px;
border: 2px solid #acdbf5;
padding: 0.5em;
background-color: #7fd0ed;
color: #fff;
margin-bottom: 0.5em;
-webkit-animation-duration: 1s;
-webkit-animation-name: convoopen;
clear: both;
}
li.conversation {
border-bottom: 1px solid #ccc;
}
.conversation .name {
padding: 1em 0 1em 3em;
}
.conversation.closed {
@ -54,9 +59,7 @@
float: right;
}
.conversation .image {
position: absolute;
top: 8px;
left: 10px;
float: left;
display: inline-block;
background-color: #fff;
border: 2px solid #acdbf5;

View file

@ -19,11 +19,75 @@
body {
margin: 0;
min-width: 400px;
min-height: 500px;
font-family: sans-serif;
color: #333;
}
/* layout 2 col full height */
html {
overflow: auto;
height: 100%;
}
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
height: 100%;
min-width:400px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
height: 100%;
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colleft {
float:left;
width:100%;
height: 100%;
position:relative;
border-right: 2px solid #acdbf5;
}
.col1,
.col2 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 2 Column (left menu) settings */
.leftmenu .colleft {
right:72%; /* right column width */
background:#f4f4f4; /* left column background colour */
}
.leftmenu .col1 {
width:72%; /* right column content width */
left:100%; /* 100% plus left column left padding */
}
.leftmenu .col2 {
width:28%; /* left column content width (column width minus left and right padding) */
}
/* end layout */
/*
#sidebar {
float: left;
width: 30%;
padding: 1em;
}
#main {
margin-left: 35%;
padding: 1em;
border-left: 2px solid #acdbf5;
}
*/
.container {
max-width: 960px;
@ -33,6 +97,7 @@ body {
header {
padding: 5px 0;
background-color: #7fd0ed;
}
label {
@ -40,6 +105,7 @@ label {
margin-right: 1em;
}
#compose-create,
#compose-cancel {
float: right;
}
@ -48,11 +114,12 @@ label {
padding: 0.3em 1em;
}
#popup_send_numbers {
margin-bottom: 0;
#send_numbers {
max-width: 70%;
margin-bottom: 1em;
}
#popup_send_numbers:focus + .contacts,
#send_numbers:focus + .contacts,
.contacts:hover {
display: block;
z-index: 10;