watcha
/
watcha-admin
mirror of https://github.com/watcha-fr/watcha-admin
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

feat: replace App.css content with user.css one and improve centered layout

Browse Source
pull/15/head
c-cal 6 years ago
parent 3feff5ace2
commit 0ad8d5648f
Signed by: watcha
GPG Key ID: 87DD78E7F7A1581D
4 changed files with 207 additions and 350 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 255
      src/App.css
  2. 1
      src/App.js
  3. 292
      src/User.css
  4. 9
      src/index.css

255
src/App.css
Unescape View File

@ -1,67 +1,218 @@
/* Extra small devices (phones, 600px and down) */
.SubmitButton {
background: rgb(65, 65, 65);
border-radius: 36px;
.delayed {
animation: 0s linear 0.5s forwards makeVisible;
visibility: hidden;
}
@media only screen and (max-width: 600px) {
.container {
height: 100vh;
width: 100vw;
text-align: center;
@keyframes makeVisible {
to {
visibility: visible;
}
}
.SubmitButton {
position: absolute;
width: 100vw;
bottom: 0;
left: 0;
height: 6vh;
border-radius: 0px;
}
.fullCentered {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.container {
text-align: center;
height: 100vh;
width: 100vw;
}
.loginForm {
max-width: 25em;
text-align: center;
}
.SubmitButton {
height: 5vh;
width: 15vh;
}
.logo {
width: 10em;
height: auto;
max-width: 75vw;
max-height: 30vh;
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.container {
height: 100vh;
width: 100vw;
}
.tab-content,
.tab-pane {
height: 100%;
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.container {
height: 100vh;
width: 100vw;
}
.loadingLoginButton {
display: flex;
align-items: center;
}
.SubmitButton {
height: 4vh;
width: 19vh;
font-size: 1.6vh;
}
.loadingLoginText {
flex-grow: 1;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.container {
height: 100vh;
width: 100vw;
text-align: center;
}
.rowSelected {
background: #00e5e5;
color: white !important;
}
.bottomButtons {
margin: auto;
width: 200px;
margin-bottom: 10px;
}
.rightPanel {
height: 90vh;
width: 30vw;
}
.trueBoolean {
color: green;
}
.page-header {
margin: 40px 49px 20px;
}
.falseBoolean {
color: red;
}
.filtersOption {
display: flex;
justify-content: space-between;
align-items: center;
}
.refreshButton {
margin-right: 20px;
}
.card-header.header-with-button {
display: flex;
justify-content: space-between;
}
.fas {
line-height: inherit;
}
.statsPanelContent {
display: flex;
justify-content: space-between;
}
.statsPanelsContainer {
display: flex;
font-size: 18px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
.statsPanel {
flex-grow: 1;
margin: 2vw;
background-color: #337ab7;
color: white;
}
.dismissRight {
cursor: pointer;
}
.email.form-group {
display: flex;
align-items: baseline;
}
.labelText {
font-size: 14px;
font-weight: 700;
}
.bottomButton {
display: flex;
flex-direction: column;
align-items: center;
}
.ActivationButton {
width: 300px;
margin-bottom: 10px;
}
.TableToolBar {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
}
.table-responsive {
max-height: 92vh;
}
.tableContainer {
display: flex;
margin-left: 20px;
}
.table-responsive {
flex-grow: 1;
}
.checkboxfilter {
display: flex;
margin-top: 2vh;
}
.checkboxfilter label {
margin-left: 4px;
}
.checkboxfilter input {
margin-left: 2px;
}
.usersPanel {
height: none;
width: none;
}
.inputValue {
margin-right: 12px;
font-size: 14px;
}
.inputValue.disabled {
margin-right: 12px;
font-size: 14px;
background: #e3e3e3;
}
.textFilter {
margin-top: 1vh;
margin-right: 8px;
}
.AdminName {
text-decoration: underline;
cursor: pointer;
}
.ServerStatePanelBody {
background: grey;
}
.StatsTitle {
cursor: pointer;
}
.TableAdvanced {
display: block;
overflow-y: auto;
max-height: 30vh;
}
.Error {
color: red;
}
.Warning {
color: rgb(245, 153, 16);
}
.Log {
color: blue;
}

1
src/App.js
Unescape View File

@ -9,7 +9,6 @@ import MatrixClientContext from "./MatrixClientContext";
import SuspenseFallback from "./SuspenseFallback.js";
import "./App.css";
import "./User.css";
class App extends Component {
constructor(props) {

292
src/User.css
Unescape View File

@ -1,292 +0,0 @@
.delayed {
animation: 0s linear 0.5s forwards makeVisible;
visibility: hidden;
}
@keyframes makeVisible {
to {
visibility: visible;
}
}
.fullCentered {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.loginForm {
max-width: 25em;
}
.logo {
width: 10em;
height: auto;
max-width: 80vw;
max-height: 30vh;
}
.loadingLoginButton {
display: flex;
align-items: center;
}
.loadingLoginText {
flex-grow: 1;
}
.loading {
height: stretch;
width: stretch;
display: flex;
align-items: center;
justify-content: center;
cursor: progress;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-style: italic;
}
.rowSelected {
background: #00e5e5;
color: white !important;
}
.bottomButtons {
margin: auto;
width: 200px;
margin-bottom: 10px;
}
.rightPanel {
height: 90vh;
width: 30vw;
}
.trueBoolean {
color: green;
}
@keyframes blink {
/**
* At the start of the animation the dot
* has an opacity of .2
*/
0% {
opacity: 0.2;
}
/**
* At 20% the dot is fully visible and
* then fades out slowly
*/
20% {
opacity: 1;
}
/**
* Until it reaches an opacity of .2 and
* the animation can start again
*/
100% {
opacity: 0.2;
}
}
.loading span {
text-align: center;
/**
* Use the blink animation, which is defined above
*/
animation-name: blink;
/**
* The animation should take 1.4 seconds
*/
animation-duration: 1.4s;
/**
* It will repeat itself forever
*/
animation-iteration-count: infinite;
/**
* This makes sure that the starting style (opacity: .2)
* of the animation is applied before the animation starts.
* Otherwise we would see a short flash or would have
* to set the default styling of the dots to the same
* as the animation. Same applies for the ending styles.
*/
animation-fill-mode: both;
}
.loadingText {
text-align: center;
font-size: x-large;
}
.loadingText span:nth-child(2) {
/**
* Starts the animation of the third dot
* with a delay of .2s, otherwise all dots
* would animate at the same time
*/
animation-delay: 0.2s;
}
.page-header {
margin: 40px 49px 20px;
}
.loadingText span:nth-child(3) {
/**
* Starts the animation of the third dot
* with a delay of .4s, otherwise all dots
* would animate at the same time
*/
animation-delay: 0.4s;
}
.falseBoolean {
color: red;
}
.filtersOption {
display: flex;
justify-content: space-between;
align-items: center;
}
.refreshButton {
margin-right: 20px;
}
.card-header.header-with-button {
display: flex;
justify-content: space-between;
}
.fas {
line-height: inherit;
}
.statsPanelContent {
display: flex;
justify-content: space-between;
}
.statsPanelsContainer {
display: flex;
font-size: 18px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
.statsPanel {
flex-grow: 1;
margin: 2vw;
background-color: #337ab7;
color: white;
}
.dismissRight {
cursor: pointer;
}
.email.form-group {
display: flex;
align-items: baseline;
}
.labelText {
font-size: 14px;
font-weight: 700;
}
.bottomButton {
display: flex;
flex-direction: column;
align-items: center;
}
.ActivationButton {
width: 300px;
margin-bottom: 10px;
}
.TableToolBar {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
}
.table-responsive {
max-height: 92vh;
}
.tableContainer {
display: flex;
margin-left: 20px;
}
.table-responsive {
flex-grow: 1;
}
.checkboxfilter {
display: flex;
margin-top: 2vh;
}
.checkboxfilter label {
margin-left: 4px;
}
.checkboxfilter input {
margin-left: 2px;
}
.usersPanel {
height: none;
width: none;
}
.inputValue {
margin-right: 12px;
font-size: 14px;
}
.inputValue.disabled {
margin-right: 12px;
font-size: 14px;
background: #e3e3e3;
}
.textFilter {
margin-top: 1vh;
margin-right: 8px;
}
.AdminName {
text-decoration: underline;
cursor: pointer;
}
.ServerStatePanelBody {
background: grey;
}
.StatsTitle {
cursor: pointer;
}
.TableAdvanced {
display: block;
overflow-y: auto;
max-height: 30vh;
}
.Error {
color: red;
}
.Warning {
color: rgb(245, 153, 16);
}
.Log {
color: blue;
}

9
src/index.css
Unescape View File

@ -1,5 +1,4 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#root {
width: 100vw;
height: 100vh;
}
Write Preview
Loading…
Cancel
Save