Skip to content

Commit

Permalink
Fix positionning and cleanup css
Browse files Browse the repository at this point in the history
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  • Loading branch information
skjnldsv committed May 30, 2021
1 parent 388245c commit 1c2573a
Show file tree
Hide file tree
Showing 7 changed files with 29 additions and 41 deletions.
25 changes: 25 additions & 0 deletions css/contacts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ $grid-height-unit: 40px;
$grid-input-padding: 7px;
$grid-input-margin: 3px;
$grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
$list-width: 300px;

// components
@import 'SettingsSection';
Expand All @@ -38,3 +39,27 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
// various
@import 'animations';
@import 'icons';


// global design overrides
#app-content-wrapper {
display: flex;
}

.app-content-details {
// Starts shrinking at the same width as the list
flex: 1 1 $list-width;
min-width: 0;
padding: 0 80px 80px 80px;
}

.app-content-list {
flex: 1 1 $list-width;
// Cancel scrolling
overflow: visible;

// Make sure we don't show extra margins
.empty-content {
padding: 20px;
}
}
4 changes: 0 additions & 4 deletions src/components/AppContent/CircleContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -173,10 +173,6 @@ export default {
</script>

<style lang="scss" scoped>
#app-content-wrapper {
display: flex;
}

// TODO: replace my button component when available
button {
height: 44px;
Expand Down
6 changes: 0 additions & 6 deletions src/components/AppContent/ContactsContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -151,9 +151,3 @@ export default {
},
}
</script>

<style lang="scss" scoped>
#app-content-wrapper {
display: flex;
}
</style>
6 changes: 0 additions & 6 deletions src/components/CircleDetails.vue
Original file line number Diff line number Diff line change
Expand Up @@ -211,12 +211,6 @@ export default {
</script>

<style lang="scss" scoped>
.app-content-details {
flex: 1 1 100%;
min-width: 0;
padding: 0 80px 80px 80px;
}

.circle-details-section {
&:not(:first-of-type) {
margin-top: 24px;
Expand Down
10 changes: 0 additions & 10 deletions src/components/ContactsList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -152,16 +152,6 @@ export default {
</script>

<style lang="scss" scoped>
.app-content-list {
flex: 1 1 300px;
// Cancel scrolling
overflow: visible;

.empty-content {
padding: 20px;
}
}

// Make virtual scroller scrollable
.contacts-list {
max-height: 100%;
Expand Down
9 changes: 4 additions & 5 deletions src/components/EntityPicker/EntityPicker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
</transition-group>

<!-- No recommendations -->
<EmptyContent v-else-if="dataSet.length === 0" icon="icon-search">
<EmptyContent v-if="dataSet.length === 0" icon="icon-search">
{{ t('contacts', 'Search for people to add') }}
</EmptyContent>

Expand Down Expand Up @@ -384,7 +384,6 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
/** This next 2 rules are pretty hacky, with the modal component somehow
the margin applied to the content is added to the total modal width,
so here we subtract it to the width and height of the content.
Expand Down Expand Up @@ -418,9 +417,9 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
display: flex;
overflow-y: auto;
align-content: flex-start;
justify-content: flex-start;
flex: 1 0 auto;
flex-wrap: wrap;
justify-content: flex-start;
// half a line height to know there is more lines
max-height: 6.5em;
padding: $entity-spacing 0;
Expand Down Expand Up @@ -457,8 +456,8 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
}

// Properly center Entity Picker empty content
.empty-content {
margin: 0;
::v-deep .empty-content {
margin: auto 0 !important;
}

/** Size full in the modal component doesn't have border radius, this adds
Expand Down
10 changes: 0 additions & 10 deletions src/components/MemberList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -254,16 +254,6 @@ export default {
</script>

<style lang="scss" scoped>
.app-content-list {
flex: 1 1 300px;
// Cancel scrolling
overflow: visible;

.empty-content {
padding: 20px;
}
}

.members-list {
// Make virtual scroller scrollable
max-height: 100%;
Expand Down

0 comments on commit 1c2573a

Please sign in to comment.