Skip to content

Commit fef3159

Browse files
JonasGosebergJonasGoseberg
authored
Merge pull request #84 from imbus/SIT-133-FloatingButtons
Sit 133 floating buttons
2 parents afafccd + 550af66 commit fef3159

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+2150
-2026
lines changed

‎public/css/dist/advanced-search.css‎

Lines changed: 150 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,150 @@
1-
/*
2-
Base styles for the filter sidebar and its transitions.
3-
Handles showing/hiding the sidebar smoothly.
4-
*/
5-
.filter-sidebar {
6-
transition: all 0.3s ease;
7-
position: relative;
8-
}
9-
10-
/*
11-
Smooth transition for the filter body (the inner panel).
12-
Ensures expanding/collapsing feels fluid.
13-
*/
14-
.filter-body {
15-
transition: all 0.3s ease;
16-
overflow: hidden;
17-
}
18-
19-
/*
20-
Fade-in/out effect for any element with this class when shown/hidden.
21-
*/
22-
.filter-content {
23-
transition: opacity 0.2s ease;
24-
}
25-
26-
/*
27-
Fade-in/out for filter section title and clear text.
28-
*/
29-
.filter-title,
30-
.clear-text {
31-
transition: opacity 0.2s ease;
32-
}
33-
34-
/* ---------- Desktop styles ---------- */
35-
@media (min-width: 769px) {
36-
/*
37-
When collapsed, the sidebar is skinny and its content is hidden.
38-
*/
39-
}
40-
41-
/* ---------- Mobile/Tablet styles ---------- */
42-
@media (max-width: 768px) {
43-
/*
44-
Sidebar takes full width and less margin on mobile.
45-
*/
46-
.filter-sidebar {
47-
width: 100% !important;
48-
margin-bottom: 15px;
49-
}
50-
51-
/*
52-
Collapsed sidebar hides content and disables interaction.
53-
*/
54-
}
55-
56-
/*
57-
Ensures filter panel container uses full width and is padded.
58-
Makes it responsive.
59-
*/
60-
.container {
61-
width: 100%;
62-
margin: 0 auto;
63-
padding: 10px;
64-
box-sizing: border-box;
65-
}
66-
67-
/*
68-
Makes the advanced search filters section block-level and full width.
69-
*/
70-
#advancedSearchFilters {
71-
display: block;
72-
max-width: 100%;
73-
margin: 0;
74-
}
75-
76-
/*
77-
Scrollable filter panel body, with padding.
78-
*/
79-
.box-body {
80-
overflow-y: auto;
81-
padding: 15px;
82-
}
83-
84-
/*
85-
On small screens, limit box-body max height to 75% of viewport.
86-
Makes scrolling manageable on mobile.
87-
*/
88-
@media (max-width: 768px) {
89-
.box-body {
90-
max-height: 75vh;
91-
}
92-
}
93-
94-
/*
95-
On desktop, take up all available vertical height.
96-
*/
97-
@media (min-width: 769px) {
98-
.box-body {
99-
height: 100%;
100-
}
101-
}
102-
103-
/*
104-
Button blocks have a little space between each for clarity.
105-
*/
106-
107-
/*
108-
Custom thin scrollbar for the filter area.
109-
Aesthetic tweak.
110-
*/
111-
.box-body::-webkit-scrollbar {
112-
width: 6px;
113-
}
114-
115-
/*
116-
Collapse button tweaks for spacing.
117-
*/
118-
.collapse-toggle {
119-
margin-right: 5px;
120-
}
121-
122-
/*
123-
By default, hide both the desktop and mobile collapse icons.
124-
*/
125-
.icon-desktop,
126-
.icon-mobile {
127-
display: none;
128-
}
129-
130-
/*
131-
Show the desktop collapse icon on desktop screens.
132-
*/
133-
@media (min-width: 768px) {
134-
.icon-desktop {
135-
display: inline;
136-
}
137-
}
138-
139-
/*
140-
Show the mobile collapse icon on mobile screens.
141-
*/
142-
@media (max-width: 767px) {
143-
.icon-mobile {
144-
display: inline;
145-
}
146-
}
1+
/*
2+
Base styles for the filter sidebar and its transitions.
3+
Handles showing/hiding the sidebar smoothly.
4+
*/
5+
.filter-sidebar {
6+
transition: all 0.3s ease;
7+
position: relative;
8+
}
9+
10+
/*
11+
Smooth transition for the filter body (the inner panel).
12+
Ensures expanding/collapsing feels fluid.
13+
*/
14+
.filter-body {
15+
transition: all 0.3s ease;
16+
overflow: hidden;
17+
}
18+
19+
/*
20+
Fade-in/out effect for any element with this class when shown/hidden.
21+
*/
22+
.filter-content {
23+
transition: opacity 0.2s ease;
24+
}
25+
26+
/*
27+
Fade-in/out for filter section title and clear text.
28+
*/
29+
.filter-title,
30+
.clear-text {
31+
transition: opacity 0.2s ease;
32+
}
33+
34+
/* ---------- Desktop styles ---------- */
35+
@media (min-width: 769px) {
36+
/*
37+
When collapsed, the sidebar is skinny and its content is hidden.
38+
*/
39+
}
40+
41+
/* ---------- Mobile/Tablet styles ---------- */
42+
@media (max-width: 768px) {
43+
/*
44+
Sidebar takes full width and less margin on mobile.
45+
*/
46+
.filter-sidebar {
47+
width: 100% !important;
48+
margin-bottom: 15px;
49+
}
50+
51+
/*
52+
Collapsed sidebar hides content and disables interaction.
53+
*/
54+
}
55+
56+
/*
57+
Ensures filter panel container uses full width and is padded.
58+
Makes it responsive.
59+
*/
60+
.container {
61+
width: 100%;
62+
margin: 0 auto;
63+
padding: 10px;
64+
box-sizing: border-box;
65+
}
66+
67+
/*
68+
Makes the advanced search filters section block-level and full width.
69+
*/
70+
#advancedSearchFilters {
71+
display: block;
72+
max-width: 100%;
73+
margin: 0;
74+
}
75+
.advancedSearchPanel--with-buffer {
76+
min-height: calc(100% + 70px);
77+
padding-bottom: 70px; /* gives room for floating buttons */
78+
}
79+
80+
/*
81+
Scrollable filter panel body, with padding.
82+
*/
83+
.box-body {
84+
overflow-y: auto;
85+
padding: 15px;
86+
}
87+
88+
/*
89+
On small screens, limit box-body max height to 75% of viewport.
90+
Makes scrolling manageable on mobile.
91+
*/
92+
@media (max-width: 768px) {
93+
.box-body {
94+
max-height: 75vh;
95+
}
96+
}
97+
98+
/*
99+
On desktop, take up all available vertical height.
100+
*/
101+
@media (min-width: 769px) {
102+
.box-body {
103+
height: 100%;
104+
}
105+
}
106+
107+
/*
108+
Button blocks have a little space between each for clarity.
109+
*/
110+
111+
/*
112+
Custom thin scrollbar for the filter area.
113+
Aesthetic tweak.
114+
*/
115+
.box-body::-webkit-scrollbar {
116+
width: 6px;
117+
}
118+
119+
/*
120+
Collapse button tweaks for spacing.
121+
*/
122+
.collapse-toggle {
123+
margin-right: 5px;
124+
}
125+
126+
/*
127+
By default, hide both the desktop and mobile collapse icons.
128+
*/
129+
.icon-desktop,
130+
.icon-mobile {
131+
display: none;
132+
}
133+
134+
/*
135+
Show the desktop collapse icon on desktop screens.
136+
*/
137+
@media (min-width: 768px) {
138+
.icon-desktop {
139+
display: inline;
140+
}
141+
}
142+
143+
/*
144+
Show the mobile collapse icon on mobile screens.
145+
*/
146+
@media (max-width: 767px) {
147+
.icon-mobile {
148+
display: inline;
149+
}
150+
}

‎public/css/dist/advanced-search.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/css/dist/all.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/css/dist/bootstrap-table.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)