@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Update Conpherence CSS
Summary:
Updates Conpherence CSS for mostly responsive design. Notably:
- Clipped nav 20px
- Clipped widgets 40px
- Tested tablet and phone layouts
- Phone layout mostly done.
- Bouncy webkit scroll areas.
Still more work to do, but I think it should be easy now for Bob to lay in the rest of mobile. It probably doesn't need to render the menu and conversation in the widget area, as I think we can now credibly position: fix it in mobile. Not completely sold on tablet layout, but it's still better than current.
Test Plan: Tested layouts on iPhone and iPad simulator.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Maniphest Tasks: T2421
Differential Revision: https://secure.phabricator.com/D5442
+72
-37
+4
-4
src/__celerity_resource_map__.php
+4
-4
src/__celerity_resource_map__.php
···
797
797
),
798
798
'conpherence-header-pane-css' =>
799
799
array(
800
-
'uri' => '/res/11c32adc/rsrc/css/application/conpherence/header-pane.css',
800
+
'uri' => '/res/70741f86/rsrc/css/application/conpherence/header-pane.css',
801
801
'type' => 'css',
802
802
'requires' =>
803
803
array(
···
806
806
),
807
807
'conpherence-menu-css' =>
808
808
array(
809
-
'uri' => '/res/0dc6b412/rsrc/css/application/conpherence/menu.css',
809
+
'uri' => '/res/82862113/rsrc/css/application/conpherence/menu.css',
810
810
'type' => 'css',
811
811
'requires' =>
812
812
array(
···
815
815
),
816
816
'conpherence-message-pane-css' =>
817
817
array(
818
-
'uri' => '/res/3aa15b9e/rsrc/css/application/conpherence/message-pane.css',
818
+
'uri' => '/res/64d6c294/rsrc/css/application/conpherence/message-pane.css',
819
819
'type' => 'css',
820
820
'requires' =>
821
821
array(
···
833
833
),
834
834
'conpherence-widget-pane-css' =>
835
835
array(
836
-
'uri' => '/res/1c43dda4/rsrc/css/application/conpherence/widget-pane.css',
836
+
'uri' => '/res/0e4a8ded/rsrc/css/application/conpherence/widget-pane.css',
837
837
'type' => 'css',
838
838
'requires' =>
839
839
array(
+9
-1
webroot/rsrc/css/application/conpherence/header-pane.css
+9
-1
webroot/rsrc/css/application/conpherence/header-pane.css
···
8
8
9
9
.conpherence-header-pane {
10
10
border-bottom: 1px solid #ccc;
11
-
background: #fff;
12
11
height: 80px;
13
12
width: 100%;
13
+
}
14
+
15
+
.device .conpherence-header-pane {
16
+
position: fixed;
17
+
top: 44px;
18
+
}
19
+
20
+
.device-phone .conpherence-header-pane {
21
+
display: none;
14
22
}
15
23
16
24
.conpherence-header-pane .edit {
+30
-14
webroot/rsrc/css/application/conpherence/message-pane.css
+30
-14
webroot/rsrc/css/application/conpherence/message-pane.css
···
3
3
*/
4
4
.conpherence-message-pane {
5
5
position: fixed;
6
-
left: 320px;
7
-
top: 94px;
8
-
min-width: 320px;
6
+
left: 300px;
7
+
right: 281px;
8
+
top: 125px;
9
+
min-width: 300px;
9
10
width: auto;
10
11
height: 100%;
11
-
margin: 0px 320px 0px 0px;
12
12
}
13
+
14
+
/* js should control this */
15
+
.device-phone .conpherence-message-pane {
16
+
display: none;
17
+
}
18
+
13
19
.conpherence-show-older-messages {
14
20
display: block;
15
21
background: #e0e3ec;
···
21
27
22
28
.conpherence-message-pane .conpherence-messages {
23
29
position: fixed;
24
-
left: 320px;
25
-
right: 321px;
26
-
top: 124px;
30
+
left: 300px;
31
+
right: 281px;
32
+
top: 125px;
27
33
bottom: 142px;
28
34
overflow-y: auto;
29
-
box-shadow: inset 1px 5px 5px rgba(0,0,0,0.1);
35
+
box-shadow: inset 1px 4px 5px rgba(0,0,0,0.1);
36
+
-webkit-overflow-scrolling: touch;
30
37
}
31
38
32
39
.conpherence-message-pane .phabricator-form-view {
···
36
43
padding: 0;
37
44
position: fixed;
38
45
bottom: 0;
39
-
left: 320px;
40
-
right: 321px;
46
+
left: 300px;
47
+
right: 281px;
41
48
}
42
49
43
50
.device-tablet
···
60
67
61
68
.conpherence-message-pane .phabricator-transaction-detail {
62
69
border-width: 0;
70
+
margin-left: 45px;
63
71
}
64
72
65
-
.conpherence-message-pane .phabricator-transaction-header {
66
-
background: none;
73
+
.conpherence-message-pane .phabricator-transaction-info,
74
+
.conpherence-message-pane .phabricator-content-source-view {
75
+
color: #b7b7b7;
67
76
}
68
77
69
-
.conpherence-message-pane .phabricator-transaction-info {
78
+
.conpherence-message-pane .phabricator-transaction-header,
79
+
.conpherence-message-pane .phabricator-transaction-info,
80
+
.conpherence-message-pane .phabricator-transaction-content {
70
81
background: none;
71
82
}
72
83
73
84
.conpherence-message-pane .phabricator-transaction-content {
74
-
background: none;
85
+
padding-top: 0;
75
86
}
76
87
77
88
.conpherence-message-pane .conpherence-edited .phabricator-transaction-content {
···
105
116
padding: 6px;
106
117
height: 6em;
107
118
}
119
+
120
+
.device .conpherence-message-pane .phabricator-form-view .aphront-form-control .aphront-form-input {
121
+
margin: 0;
122
+
width: 100%;
123
+
}
+25
-14
webroot/rsrc/css/application/conpherence/widget-pane.css
+25
-14
webroot/rsrc/css/application/conpherence/widget-pane.css
···
5
5
.conpherence-widget-pane {
6
6
position: fixed;
7
7
right: 0px;
8
-
top: 124px;
9
-
width: 320px;
8
+
top: 125px;
9
+
width: 280px;
10
10
height: 100%;
11
11
border-width: 0 0 0 1px;
12
12
border-color: #CCC;
13
13
border-style: solid;
14
14
background: url('/rsrc/image/texture/dust_background.jpg');
15
15
overflow-y: auto;
16
+
-webkit-overflow-scrolling: touch;
17
+
}
18
+
19
+
.device-phone .conpherence-widget-pane {
20
+
top: 44px;
21
+
width: 100%;
16
22
}
17
23
18
24
.conpherence-widget-pane .aphront-form-input {
···
22
28
23
29
.conpherence-widget-pane .widgets-header {
24
30
background-color: #d8dce2;
25
-
width: 320px;
26
31
box-shadow: 0px 2px 2px rgba(0,0,0,0.15);
27
32
}
28
33
29
34
.conpherence-widget-pane .widgets-header .widgets-header-icon-holder {
30
35
height: 40px;
36
+
width: 280px;
37
+
margin: 0 auto;
31
38
}
32
39
33
40
.device-desktop .conpherence-widget-pane .widgets-header
34
41
.widgets-header-icon-holder {
35
-
width: 196px;
42
+
width: 175px;
36
43
margin: 0px auto 0px auto;
37
44
}
38
45
···
40
47
display: block;
41
48
width: 29px;
42
49
height: 34px;
43
-
margin: 4px 0px 0px 20px;
50
+
margin: 4px 0px 0px 14px;
44
51
float: left;
45
52
clear: none;
46
53
}
···
66
73
overflow-y: auto;
67
74
top: 165px;
68
75
bottom: 0px;
69
-
width: 320px;
76
+
width: 100%;
77
+
}
78
+
79
+
.device-phone .conpherence-widget-pane .widgets-body {
80
+
top: 85px;
70
81
}
71
82
72
83
/* files widget */
73
84
74
85
.conpherence-widget-pane #widgets-files .file-entry {
75
86
padding: 12px 0px 14px 0px;
76
-
width: 320px;
77
87
}
78
88
.conpherence-widget-pane #widgets-files .file-icon {
79
89
position: relative;
···
89
99
top: -4px;
90
100
left: 20px;
91
101
overflow-x: hidden;
92
-
width: 256px;
102
+
width: 210px;
93
103
font-weight: bold;
94
104
}
95
105
.conpherence-widget-pane #widgets-files .file-uploaded-by {
96
-
color: #bfbfbf;
106
+
color: #a1a5a9;
97
107
position: relative;
98
108
top: 0px;
99
109
left: 20px;
100
-
width: 270px;
110
+
width: 210px;
101
111
font-size: 11px;
102
112
}
103
113
···
106
116
height: 120px;
107
117
width: 160px;
108
118
margin: 8px 0px 8px 52px;
109
-
border: 1px solid rgb(24, 85, 157);
119
+
border: 1px solid #7289b7;
120
+
box-shadow: 0 0px 5px rgba(0,0,0,.25);
121
+
background: #fff;
110
122
}
111
123
112
124
.conpherence-widget-pane #widgets-files .divider {
113
125
float: left;
114
126
clear: both;
115
-
width: 242px;
116
-
margin: 8px 0px 0px 52px;
127
+
width: 210px;
128
+
margin: 8px 0px 0px 50px;
117
129
border: 1px dashed #bfbfbf;
118
130
}
119
-
120
131
/* calendar widget */
121
132
122
133
.conpherence-widget-pane #widgets-calendar .user-status {