Skip to content

Commit

Permalink
Conversations view fixed and lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexrlpz
alexrlpz committed Feb 14, 2025
1 parent 2cbd7ac commit f8d04a7
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 51 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ jobs:
working-directory: ./spec/decidim_dummy_app/
- run: bundle exec rspec
name: RSpec
- uses: actions/upload-artifact@v2
- uses: actions/upload-artifact@v4
if: always()
with:
name: screenshots
Expand Down
1 change: 0 additions & 1 deletion app/packs/stylesheets/decidim/notify/admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,3 @@
}
}
}

59 changes: 34 additions & 25 deletions app/packs/stylesheets/decidim/notify/hexagon.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use 'sass:math';
@use "sass:math";

@mixin responsive_hexagon() {
@include hexagon(71px);
Expand All @@ -11,7 +11,13 @@
}
}

@mixin hexagon($width: 71px, $borderWidth: 2px, $borderColor: #000, $shadow: 0 0 10px rgba(0,0,0,0.5), $color: #fff) {
@mixin hexagon(
$width: 71px,
$borderWidth: 2px,
$borderColor: #000,
$shadow: 0 0 10px rgba(0, 0, 0, 0.5),
$color: #fff
) {
// $width works best with even numbers - browser rounding effs up with odds

//calculated values
Expand All @@ -22,30 +28,33 @@

$height: math.div($width, $root3);
$capWidth: math.div($width, $root2); // caps = the top and bottom triangles
$capBorderWidth: $borderWidth*$root2;
$capBorderHeight: math.div($borderWidth*2, $root3); //needed to offset bg pos
$capBorderWidth: $borderWidth * $root2;
$capBorderHeight: math.div(
$borderWidth * 2,
$root3
); //needed to offset bg pos
$border: solid $borderWidth $borderColor;
$capBorder: solid $capBorderWidth $borderColor;
$coverWidth: $width - $borderWidth*2; //the cover up rectangle
$coverHeight: $height - $borderWidth*$scaleFactor*2;
$coverWidth: $width - $borderWidth * 2; //the cover up rectangle
$coverHeight: $height - $borderWidth * $scaleFactor * 2;
$capHeight: $height - $capBorderHeight;
$bgHeight: $capHeight*2;
$bgHeight: $height*2 - ($capBorderHeight*2);
$bgHeight: $height*2 - math.div($borderWidth*2, $root3)*2;
$bgHeight: $height*2 - math.div($borderWidth, $root3)*4;
$translateBG: -$height*0.5 + $capBorderHeight*0.5;
$bgHeight: $capHeight * 2;
$bgHeight: $height * 2 - ($capBorderHeight * 2);
$bgHeight: $height * 2 - math.div($borderWidth * 2, $root3) * 2;
$bgHeight: $height * 2 - math.div($borderWidth, $root3) * 4;
$translateBG: -$height * 0.5 + $capBorderHeight * 0.5;

position: relative;
width: $width;
height: $height;
margin: $height*0.5 auto;
margin: $height * 0.5 auto;
background-color: $color;
background-size: auto $bgHeight; //fit to total height, minus borders
background-position: center;
border-left: $border;
border-right: $border;
box-shadow: $shadow;
text-align:left;
text-align: left;

.hex1,
.hex2 {
Expand All @@ -57,7 +66,7 @@
overflow: hidden;
transform: scaleY($scaleFactor) rotate(-45deg);
background: inherit;
left: ($width - $capWidth)*0.5 - $borderWidth; //offset by half the difference in
left: ($width - $capWidth) * 0.5 - $borderWidth; //offset by half the difference in
}

//counter transform the bg image on the caps
Expand All @@ -76,7 +85,7 @@

//send top to top and bottom to bottom
.hex1 {
top: math.div(-$width, $root2)*0.5; //half the rhombus height
top: math.div(-$width, $root2) * 0.5; //half the rhombus height
border-top: $capBorder;
border-right: $capBorder;

Expand All @@ -86,7 +95,7 @@
}

.hex2 {
bottom: math.div(-$width, $root2)*0.5; //half the rhombus height
bottom: math.div(-$width, $root2) * 0.5; //half the rhombus height
border-bottom: $capBorder;
border-left: $capBorder;

Expand All @@ -99,7 +108,7 @@
&:after {
content: "";
position: absolute;
top: $borderWidth*$scaleFactor;
top: $borderWidth * $scaleFactor;
left: 0;
width: $coverWidth;
height: $coverHeight;
Expand All @@ -110,19 +119,19 @@
// Role
.code {
z-index: 10;
bottom:-$width*0.25;
right:math.div(-$width, 6);
bottom: -$width * 0.25;
right: math.div(-$width, 6);
position: absolute;
width: $width*0.5;
height: $width*0.5;
border-radius:$width*0.5;
background-color: rgba(200,200,200,0.9);
color:#000;
width: $width * 0.5;
height: $width * 0.5;
border-radius: $width * 0.5;
background-color: rgba(200, 200, 200, 0.9);
color: #000;
font-size: 1.2em;
text-align: center;
padding-top: 7px;
line-height: 1;
font-weight: 600;
border: 1px solid #999;
}
}
}
55 changes: 33 additions & 22 deletions app/packs/stylesheets/decidim/notify/notify.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@import "tom-select/dist/scss/tom-select";
@import "hexagon";

.button--double{
.button--double {
width: fit-content;
}

Expand Down Expand Up @@ -42,30 +42,34 @@
#notify-participants {
border: 1px solid #cacaca;
border-radius: 4px;
background-color: #fafafa;
background-color: #fafafa;
margin-bottom: 1rem;
padding: 0.5rem 0rem;
text-align: center;
}

#notify-note_takers, .card-section.notify-chapter-notes {
#notify-note_takers,
.card-section.notify-chapter-notes {
border: 1px solid #cacaca;
border-radius: 4px;
background-color: #fafafa;
background-color: #fafafa;
margin-bottom: 1rem;
padding: 0.5rem;
}

#notify-note_takers {
text-align: center;
background-color: rgb(var(--tertiary-rgb) / 0.6);
background-color: rgb(var(--tertiary-rgb) / 0.6);
}

.card-section {
padding: 1rem;
}

.section, aside, .layout-2col__main, #notify-chapters {
.section,
aside,
.layout-2col__main,
#notify-chapters {
background-color: rgba(255, 255, 255, 1);
}
.hexagon {
Expand All @@ -80,7 +84,8 @@
display: none;
}

.layout-2col__main, .layout-2col__aside {
.layout-2col__main,
.layout-2col__aside {
margin-bottom: 0rem;
padding-bottom: 0rem;
margin-top: 0rem;
Expand All @@ -102,7 +107,8 @@
background-color: white;
}
}
input, textarea {
input,
textarea {
&::placeholder {
color: #333;
}
Expand All @@ -123,7 +129,7 @@
}

.by-note-taker {
background-color:rgba(var(--primary-rgb), 0.1);
background-color: rgba(var(--primary-rgb), 0.1);
}

.notify-chapter {
Expand All @@ -133,10 +139,11 @@
justify-content: center;
align-items: center;
text-align: center;
margin:1rem 0 1rem 0;
margin: 1rem 0 1rem 0;
text-transform: uppercase;
&::before,&::after {
content: '';
&::before,
&::after {
content: "";
border-top: 2px solid;
margin: 0 1rem 0 0;
flex: 1 0 1rem;
Expand All @@ -148,18 +155,19 @@
color: var(--primary);
}
&:empty {
&::before,&::after {
margin:0;
&::before,
&::after {
margin: 0;
}
}

>button {
> button {
font-size: 1rem;
color: var(--primary);
display: inline-block;
margin: 0 -0.5rem 0 0.5rem;
}
>.dropdown-pane {
> .dropdown-pane {
font-family: "Source Sans Pro", Helvetica, Roboto, Arial, sans-serif;
margin-left: -3em;
border: 1px solid #333;
Expand All @@ -179,13 +187,14 @@
}

.notify-chapter-notes {
padding:0.5rem;
padding: 0.5rem;
.notify-note {
padding: 0.5rem;
border-radius: 4px;
}

&:empty, &.empty {
&:empty,
&.empty {
&::before {
content: attr(data-empty);
font-style: italic;
Expand All @@ -199,7 +208,9 @@
.media-object {
display: flex;

h4, p, em{
h4,
p,
em {
font-size: 1rem;
line-height: 1.1rem;
margin-bottom: 0.5rem;
Expand All @@ -224,7 +235,8 @@
width: 70px;
}
&.main-section {
flex: 1;margin-left: 1rem;
flex: 1;
margin-left: 1rem;
padding-top: 1rem;
p {
white-space: pre-line;
Expand All @@ -233,11 +245,10 @@
.delete {
margin-bottom: 0.5rem;
}

}

.notify-note {
.buttons a{
.buttons a {
display: block;
&.tiny {
padding-left: 0.5rem;
Expand Down
5 changes: 3 additions & 2 deletions app/views/decidim/notify/conversations/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,9 @@
</div>
</div>
<% end %>
<%= render layout: "layouts/decidim/shared/layout_two_col", locals: { reverse: true } do %>
<% if allowed_to? :create, :notes %>
<% if allowed_to? :create, :notes %>
<%= render layout: "layouts/decidim/shared/layout_two_col", locals: { reverse: true } do %>

<div class="card card--notes-editor">
<div class="card-section">
<%= form_for(@form, url: conversations_path, remote: true, html: { id: "new_note", class: "form new_note", data: nil }) do |f| %>
Expand Down

0 comments on commit f8d04a7

Please sign in to comment.