ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-14 08:34:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

left panel, responsively

Browse Source
This commit is contained in:
Matilde Park 2019-11-22 23:28:55 -05:00 committed by Logan Allen
parent 8de846c60d
commit cc50ca3668
6 changed files with 73 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/arvo/app/contacts/css/index.css
View File

File diff suppressed because one or more lines are too long

46
pkg/arvo/app/contacts/js/index.js
View File

@ -58805,23 +58805,37 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
}
}
const _jsxFileName$3 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/skeleton.js";
class Skeleton extends react_1 {
const _jsxFileName$3 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/groups.js";
class Groups extends react_1 {
// drawer to the left
render() {
return (
react.createElement('div', { className: "h-100 w-100" , __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 10}}
, react.createElement(HeaderBar, { spinner: this.props.spinner, __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 11}} )
react.createElement('div', { className: "br b--gray4 h-100 flex-basis-100-s flex-basis-300-ns" , __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 7}}
)
)
}
}
const _jsxFileName$4 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/skeleton.js";
class Skeleton extends react_1 {
render() {
let rightPanelClasses =
this.props.display === "contactCard" ? "db" : "dn db-ns";
return (
react.createElement('div', { className: "h-100 w-100" , __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 13}}
, react.createElement(HeaderBar, { spinner: this.props.spinner, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 14}} )
, react.createElement('div', {
className: "cf w-100 flex" ,
style: {
height: "calc(100% - 48px)"
}, __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 12}}
}, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 15}}
, react.createElement(Groups, {__self: this, __source: {fileName: _jsxFileName$4, lineNumber: 20}} )
, react.createElement('div', {
className: "h-100 w-100" ,
className: "h-100 w-100 " + rightPanelClasses,
style: {
flexGrow: 1
}, __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 17}}
}, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 21}}
, this.props.children
)
)
@ -58830,7 +58844,7 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
}
}
const _jsxFileName$4 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/root.js";
const _jsxFileName$5 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/root.js";
class Root extends react_1 {
constructor(props) {
@ -58850,24 +58864,24 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
render() {
return (
react.createElement(BrowserRouter, {__self: this, __source: {fileName: _jsxFileName$4, lineNumber: 31}}
, react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$4, lineNumber: 32}}
react.createElement(BrowserRouter, {__self: this, __source: {fileName: _jsxFileName$5, lineNumber: 31}}
, react.createElement('div', { class: "h-100 w-100" , __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 32}}
, react.createElement(Route, { exact: true, path: "/~contacts",
render: (props) => {
return (
react.createElement(Skeleton, { display: "groups", __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 36}}
, react.createElement('div', { className: "h-100 w-100 overflow-x-hidden flex flex-column" , __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 37}}
react.createElement(Skeleton, { display: "groups", __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 36}}
, react.createElement('div', { className: "h-100 w-100 overflow-x-hidden bg-gray0 dn db-ns" , __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 37}}
)
)
);
}, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 33}} )
}, __self: this, __source: {fileName: _jsxFileName$5, lineNumber: 33}} )
)
)
)
}
}
const _jsxFileName$5 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/index.js";
const _jsxFileName$6 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/index.js";
api.setAuthTokens({
ship: window.ship
});
@ -58875,7 +58889,7 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
subscription.start();
reactDom.render((
react.createElement(Root, {__self: undefined, __source: {fileName: _jsxFileName$5, lineNumber: 15}} )
react.createElement(Root, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 15}} )
), document.querySelectorAll("#root")[0]);
}));

21
pkg/interface/contacts/src/css/custom.css
View File

@ -1,3 +1,8 @@
html, body, div#root {
height: 100%;
width: 100%;
}
p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
margin-block-end: unset;
margin-block-start: unset;
@ -46,4 +51,20 @@ a {
.mono {
font-family: "Source Code Pro", monospace;
}
/* responsive */
@media all and (max-width: 34.375em) {
.flex-basis-100-s {
flex-basis: 100%;
}
}
@media all and (min-width: 34.375em) {
.db-ns {
display: block;
}
.flex-basis-300-ns {
flex-basis: 300px;
}
}

4
pkg/interface/contacts/src/js/components/root.js
View File

@ -29,12 +29,12 @@ export class Root extends Component {
return (
<BrowserRouter>
<div>
<div class="h-100 w-100">
<Route exact path="/~contacts"
render={ (props) => {
return (
<Skeleton display="groups">
<div className="h-100 w-100 overflow-x-hidden flex flex-column">
<div className="h-100 w-100 overflow-x-hidden bg-gray0 dn db-ns">
</div>
</Skeleton>
);

8
pkg/interface/contacts/src/js/components/skeleton.js
View File

@ -2,10 +2,13 @@ import React, { Component } from 'react';
import classnames from 'classnames';
import { HeaderBar } from './lib/header-bar';
import { Groups } from '../groups';
export class Skeleton extends Component {
render() {
let rightPanelClasses =
this.props.display === "contactCard" ? "db" : "dn db-ns";
return (
<div className="h-100 w-100">
<HeaderBar spinner={this.props.spinner} />
@ -14,8 +17,9 @@ export class Skeleton extends Component {
style={{
height: "calc(100% - 48px)"
}}>
<Groups />
<div
className="h-100 w-100"
className={"h-100 w-100 " + rightPanelClasses}
style={{
flexGrow: 1
}}>

13
pkg/interface/contacts/src/js/groups.js Normal file
View File

@ -0,0 +1,13 @@
import React, { Component } from 'react';
export class Groups extends Component {
// drawer to the left
render() {
return (
<div className="br b--gray4 h-100 flex-basis-100-s flex-basis-300-ns">
</div>
)
}
}
export default Groups;