Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WD-8838 - add instagram to the list of social media #13598

Merged
merged 2 commits into from
Feb 23, 2024
Merged

WD-8838 - add instagram to the list of social media #13598

merged 2 commits into from
Feb 23, 2024

Conversation

lizzochek
Copy link
Contributor

@lizzochek lizzochek commented Feb 21, 2024 •
edited
Loading

Done

Add instagram to the list of social media in the footer

QA

  • demo link
  • Check out this feature branch
  • Run the site using the command ./run serve
  • View the site locally in your web browser at: http://0.0.0.0:8001/
  • Run through the following QA steps
  • Check that the logo and link are correct for instagram

Issue / Card

WD-8838

Fixes #13572

Screenshots

@webteam-app
Copy link

Demo starting at https://ubuntu-com-13598.demos.haus

@codecov Codecov
Copy link

codecov bot commented Feb 21, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (4a22762) 74.41% compared to head (aea42a3) 74.41%.
Report is 1 commits behind head on main.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main   #13598   +/-   ##
=======================================
  Coverage   74.41%   74.41%           
=======================================
  Files         107      107           
  Lines        2838     2838           
  Branches      946      946           
=======================================
  Hits         2112     2112           
  Misses        702      702           
  Partials       24       24

lorumic
lorumic reviewed Feb 21, 2024
View reviewed changes
templates/templates/footer.html
@@ -219,6 +219,16 @@ <h2 class="p-footer__title p-footer__title-text">
<path class="cls-2" d="M7 8.512v16.38c0 .758.63 1.37 1.404 1.37h16.192c.775 0 1.404-.612 1.404-1.37V8.512c0-.755-.63-1.37-1.404-1.37H8.404C7.63 7.143 7 7.757 7 8.513zm5.76 14.636H9.89v-8.634h2.87v8.634zm-1.435-9.812h-.02c-.962 0-1.585-.663-1.585-1.492 0-.847.642-1.492 1.624-1.492s1.586.645 1.604 1.492c0 .83-.623 1.492-1.623 1.492zm3.022 9.812s.038-7.824 0-8.634h2.87v1.252h-.02c.38-.59 1.058-1.454 2.607-1.454 1.888 0 3.303 1.234 3.303 3.885v4.95h-2.87V18.53c0-1.162-.415-1.953-1.453-1.953-.793 0-1.265.534-1.472 1.05-.076.184-.095.44-.095.7v4.82h-2.87z" />
</svg></a>
</li>
<li class="p-inline-list__item">
<a class="p-inline-list__link--twitter" title="Follow Ubuntu on Instagram" href="https://www.instagram.com/ubuntu_os/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 375">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is currently missing the styles for the bg and the actual icon - compare with how it is done for the other icons. I think adding the styles as suggested below should solve this, but it is just an assumption, so please verify the result on your end :)

Suggested change
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 375">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 375">
<defs>
<style>
.instagram-icon {
fill: #666666;
}
.cls-2 {
fill: #fff;
}
</style>
</defs>

Then these classes need to be applied to the 2 path elements, one for the bg and the other for the actual icon - see suggestions below.

lorumic
lorumic reviewed Feb 21, 2024
View reviewed changes
templates/templates/footer.html Outdated
<a class="p-inline-list__link--twitter" title="Follow Ubuntu on Instagram" href="https://www.instagram.com/ubuntu_os/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 375">
<g clip-path="url(#clip0_11_324)">
<path d="M187.469 7.09375C87.8516 7.09375 7.09375 87.8516 7.09375 187.469C7.09375 287.086 87.8516 367.844 187.469 367.844C287.086 367.844 367.844 287.086 367.844 187.469C367.844 87.8516 287.086 7.09375 187.469 7.09375Z" fill="#666666"/>
Copy link
Contributor

@lorumic lorumic Feb 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<path d="M187.469 7.09375C87.8516 7.09375 7.09375 87.8516 7.09375 187.469C7.09375 287.086 87.8516 367.844 187.469 367.844C287.086 367.844 367.844 287.086 367.844 187.469C367.844 87.8516 287.086 7.09375 187.469 7.09375Z" fill="#666666"/>
<path class="instagram-icon" d="M187.469 7.09375C87.8516 7.09375 7.09375 87.8516 7.09375 187.469C7.09375 287.086 87.8516 367.844 187.469 367.844C287.086 367.844 367.844 287.086 367.844 187.469C367.844 87.8516 287.086 7.09375 187.469 7.09375Z"/>

lorumic
lorumic reviewed Feb 21, 2024
View reviewed changes
templates/templates/footer.html Outdated
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 375">
<g clip-path="url(#clip0_11_324)">
<path d="M187.469 7.09375C87.8516 7.09375 7.09375 87.8516 7.09375 187.469C7.09375 287.086 87.8516 367.844 187.469 367.844C287.086 367.844 367.844 287.086 367.844 187.469C367.844 87.8516 287.086 7.09375 187.469 7.09375Z" fill="#666666"/>
<path d="M140.78 73.6689C128.777 74.2352 120.581 76.1507 113.415 78.9663C105.999 81.8564 99.7139 85.7347 93.4599 92.0113C87.2059 98.2878 83.3547 104.578 80.4849 112.005C77.7076 119.186 75.826 127.39 75.2958 139.399C74.7656 151.408 74.6483 155.269 74.7069 185.902C74.7656 216.536 74.9009 220.376 75.483 232.41C76.0561 244.411 77.9648 252.605 80.7804 259.773C83.675 267.189 87.5488 273.472 93.8276 279.728C100.106 285.984 106.392 289.827 113.837 292.701C121.012 295.474 129.217 297.364 141.224 297.89C153.232 298.416 157.096 298.538 187.721 298.479C218.346 298.42 222.201 298.285 234.233 297.714C246.265 297.143 254.417 295.221 261.587 292.419C269.003 289.518 275.29 285.651 281.542 279.369C287.794 273.088 291.643 266.794 294.51 259.362C297.29 252.188 299.178 243.982 299.7 231.984C300.225 219.943 300.349 216.099 300.291 185.469C300.232 154.84 300.094 151 299.524 138.97C298.953 126.941 297.042 118.771 294.228 111.599C291.329 104.183 287.46 97.9043 281.184 91.6435C274.907 85.3828 268.608 81.5361 261.178 78.6753C253.999 75.898 245.798 74.0051 233.791 73.4862C221.784 72.9673 217.919 72.8342 187.283 72.8928C156.647 72.9515 152.812 73.0824 140.78 73.6689ZM142.098 277.596C131.099 277.118 125.127 275.29 121.147 273.761C115.877 271.73 112.123 269.276 108.156 265.348C104.19 261.42 101.753 257.652 99.6958 252.393C98.1504 248.413 96.2891 242.448 95.7747 231.449C95.2151 219.562 95.0978 215.992 95.0324 185.875C94.967 155.758 95.082 152.194 95.6032 140.302C96.0725 129.312 97.9112 123.333 99.4386 119.356C101.469 114.079 103.915 110.331 107.852 106.367C111.789 102.403 115.545 99.9619 120.809 97.9043C124.784 96.3521 130.749 94.5066 141.743 93.9832C153.64 93.4191 157.205 93.3063 187.317 93.2409C217.43 93.1755 221.003 93.2883 232.905 93.8117C243.894 94.29 249.875 96.1107 253.848 97.6471C259.121 99.6776 262.873 102.117 266.837 106.06C270.801 110.004 273.244 113.747 275.302 119.022C276.856 122.986 278.702 128.949 279.221 139.95C279.787 151.846 279.916 155.413 279.97 185.523C280.024 215.634 279.918 219.21 279.397 231.097C278.916 242.096 277.093 248.07 275.561 252.054C273.531 257.323 271.083 261.079 267.144 265.041C263.204 269.003 259.452 271.444 254.187 273.501C250.216 275.051 244.244 276.901 233.259 277.425C221.362 277.984 217.798 278.101 187.674 278.167C157.55 278.232 153.996 278.111 142.1 277.596M234.06 125.395C234.064 128.073 234.863 130.689 236.354 132.913C237.845 135.136 239.963 136.868 242.438 137.888C244.914 138.908 247.636 139.172 250.261 138.645C252.886 138.118 255.296 136.824 257.186 134.927C259.076 133.03 260.361 130.616 260.878 127.989C261.396 125.362 261.122 122.64 260.093 120.168C259.064 117.697 257.324 115.586 255.095 114.103C252.866 112.619 250.247 111.831 247.569 111.836C243.98 111.843 240.54 113.276 238.007 115.818C235.474 118.361 234.054 121.806 234.06 125.395ZM129.578 185.799C129.641 217.791 155.623 243.666 187.608 243.605C219.593 243.544 245.487 217.565 245.426 185.573C245.365 153.581 219.377 127.699 187.387 127.762C155.397 127.825 129.517 153.811 129.578 185.799ZM149.897 185.758C149.882 178.321 152.073 171.046 156.193 164.854C160.313 158.663 166.176 153.831 173.041 150.972C179.906 148.112 187.466 147.352 194.763 148.789C202.06 150.225 208.767 153.793 214.036 159.042C219.306 164.29 222.9 170.983 224.366 178.275C225.831 185.566 225.101 193.128 222.269 200.005C219.436 206.882 214.628 212.764 208.453 216.908C202.277 221.052 195.012 223.272 187.574 223.287C182.636 223.297 177.744 222.334 173.178 220.454C168.612 218.573 164.461 215.812 160.962 212.327C157.463 208.842 154.685 204.702 152.787 200.143C150.888 195.584 149.906 190.696 149.897 185.758Z" fill="#E5E5E5"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<path d="M140.78 73.6689C128.777 74.2352 120.581 76.1507 113.415 78.9663C105.999 81.8564 99.7139 85.7347 93.4599 92.0113C87.2059 98.2878 83.3547 104.578 80.4849 112.005C77.7076 119.186 75.826 127.39 75.2958 139.399C74.7656 151.408 74.6483 155.269 74.7069 185.902C74.7656 216.536 74.9009 220.376 75.483 232.41C76.0561 244.411 77.9648 252.605 80.7804 259.773C83.675 267.189 87.5488 273.472 93.8276 279.728C100.106 285.984 106.392 289.827 113.837 292.701C121.012 295.474 129.217 297.364 141.224 297.89C153.232 298.416 157.096 298.538 187.721 298.479C218.346 298.42 222.201 298.285 234.233 297.714C246.265 297.143 254.417 295.221 261.587 292.419C269.003 289.518 275.29 285.651 281.542 279.369C287.794 273.088 291.643 266.794 294.51 259.362C297.29 252.188 299.178 243.982 299.7 231.984C300.225 219.943 300.349 216.099 300.291 185.469C300.232 154.84 300.094 151 299.524 138.97C298.953 126.941 297.042 118.771 294.228 111.599C291.329 104.183 287.46 97.9043 281.184 91.6435C274.907 85.3828 268.608 81.5361 261.178 78.6753C253.999 75.898 245.798 74.0051 233.791 73.4862C221.784 72.9673 217.919 72.8342 187.283 72.8928C156.647 72.9515 152.812 73.0824 140.78 73.6689ZM142.098 277.596C131.099 277.118 125.127 275.29 121.147 273.761C115.877 271.73 112.123 269.276 108.156 265.348C104.19 261.42 101.753 257.652 99.6958 252.393C98.1504 248.413 96.2891 242.448 95.7747 231.449C95.2151 219.562 95.0978 215.992 95.0324 185.875C94.967 155.758 95.082 152.194 95.6032 140.302C96.0725 129.312 97.9112 123.333 99.4386 119.356C101.469 114.079 103.915 110.331 107.852 106.367C111.789 102.403 115.545 99.9619 120.809 97.9043C124.784 96.3521 130.749 94.5066 141.743 93.9832C153.64 93.4191 157.205 93.3063 187.317 93.2409C217.43 93.1755 221.003 93.2883 232.905 93.8117C243.894 94.29 249.875 96.1107 253.848 97.6471C259.121 99.6776 262.873 102.117 266.837 106.06C270.801 110.004 273.244 113.747 275.302 119.022C276.856 122.986 278.702 128.949 279.221 139.95C279.787 151.846 279.916 155.413 279.97 185.523C280.024 215.634 279.918 219.21 279.397 231.097C278.916 242.096 277.093 248.07 275.561 252.054C273.531 257.323 271.083 261.079 267.144 265.041C263.204 269.003 259.452 271.444 254.187 273.501C250.216 275.051 244.244 276.901 233.259 277.425C221.362 277.984 217.798 278.101 187.674 278.167C157.55 278.232 153.996 278.111 142.1 277.596M234.06 125.395C234.064 128.073 234.863 130.689 236.354 132.913C237.845 135.136 239.963 136.868 242.438 137.888C244.914 138.908 247.636 139.172 250.261 138.645C252.886 138.118 255.296 136.824 257.186 134.927C259.076 133.03 260.361 130.616 260.878 127.989C261.396 125.362 261.122 122.64 260.093 120.168C259.064 117.697 257.324 115.586 255.095 114.103C252.866 112.619 250.247 111.831 247.569 111.836C243.98 111.843 240.54 113.276 238.007 115.818C235.474 118.361 234.054 121.806 234.06 125.395ZM129.578 185.799C129.641 217.791 155.623 243.666 187.608 243.605C219.593 243.544 245.487 217.565 245.426 185.573C245.365 153.581 219.377 127.699 187.387 127.762C155.397 127.825 129.517 153.811 129.578 185.799ZM149.897 185.758C149.882 178.321 152.073 171.046 156.193 164.854C160.313 158.663 166.176 153.831 173.041 150.972C179.906 148.112 187.466 147.352 194.763 148.789C202.06 150.225 208.767 153.793 214.036 159.042C219.306 164.29 222.9 170.983 224.366 178.275C225.831 185.566 225.101 193.128 222.269 200.005C219.436 206.882 214.628 212.764 208.453 216.908C202.277 221.052 195.012 223.272 187.574 223.287C182.636 223.297 177.744 222.334 173.178 220.454C168.612 218.573 164.461 215.812 160.962 212.327C157.463 208.842 154.685 204.702 152.787 200.143C150.888 195.584 149.906 190.696 149.897 185.758Z" fill="#E5E5E5"/>
<path class="cls-2" d="M140.78 73.6689C128.777 74.2352 120.581 76.1507 113.415 78.9663C105.999 81.8564 99.7139 85.7347 93.4599 92.0113C87.2059 98.2878 83.3547 104.578 80.4849 112.005C77.7076 119.186 75.826 127.39 75.2958 139.399C74.7656 151.408 74.6483 155.269 74.7069 185.902C74.7656 216.536 74.9009 220.376 75.483 232.41C76.0561 244.411 77.9648 252.605 80.7804 259.773C83.675 267.189 87.5488 273.472 93.8276 279.728C100.106 285.984 106.392 289.827 113.837 292.701C121.012 295.474 129.217 297.364 141.224 297.89C153.232 298.416 157.096 298.538 187.721 298.479C218.346 298.42 222.201 298.285 234.233 297.714C246.265 297.143 254.417 295.221 261.587 292.419C269.003 289.518 275.29 285.651 281.542 279.369C287.794 273.088 291.643 266.794 294.51 259.362C297.29 252.188 299.178 243.982 299.7 231.984C300.225 219.943 300.349 216.099 300.291 185.469C300.232 154.84 300.094 151 299.524 138.97C298.953 126.941 297.042 118.771 294.228 111.599C291.329 104.183 287.46 97.9043 281.184 91.6435C274.907 85.3828 268.608 81.5361 261.178 78.6753C253.999 75.898 245.798 74.0051 233.791 73.4862C221.784 72.9673 217.919 72.8342 187.283 72.8928C156.647 72.9515 152.812 73.0824 140.78 73.6689ZM142.098 277.596C131.099 277.118 125.127 275.29 121.147 273.761C115.877 271.73 112.123 269.276 108.156 265.348C104.19 261.42 101.753 257.652 99.6958 252.393C98.1504 248.413 96.2891 242.448 95.7747 231.449C95.2151 219.562 95.0978 215.992 95.0324 185.875C94.967 155.758 95.082 152.194 95.6032 140.302C96.0725 129.312 97.9112 123.333 99.4386 119.356C101.469 114.079 103.915 110.331 107.852 106.367C111.789 102.403 115.545 99.9619 120.809 97.9043C124.784 96.3521 130.749 94.5066 141.743 93.9832C153.64 93.4191 157.205 93.3063 187.317 93.2409C217.43 93.1755 221.003 93.2883 232.905 93.8117C243.894 94.29 249.875 96.1107 253.848 97.6471C259.121 99.6776 262.873 102.117 266.837 106.06C270.801 110.004 273.244 113.747 275.302 119.022C276.856 122.986 278.702 128.949 279.221 139.95C279.787 151.846 279.916 155.413 279.97 185.523C280.024 215.634 279.918 219.21 279.397 231.097C278.916 242.096 277.093 248.07 275.561 252.054C273.531 257.323 271.083 261.079 267.144 265.041C263.204 269.003 259.452 271.444 254.187 273.501C250.216 275.051 244.244 276.901 233.259 277.425C221.362 277.984 217.798 278.101 187.674 278.167C157.55 278.232 153.996 278.111 142.1 277.596M234.06 125.395C234.064 128.073 234.863 130.689 236.354 132.913C237.845 135.136 239.963 136.868 242.438 137.888C244.914 138.908 247.636 139.172 250.261 138.645C252.886 138.118 255.296 136.824 257.186 134.927C259.076 133.03 260.361 130.616 260.878 127.989C261.396 125.362 261.122 122.64 260.093 120.168C259.064 117.697 257.324 115.586 255.095 114.103C252.866 112.619 250.247 111.831 247.569 111.836C243.98 111.843 240.54 113.276 238.007 115.818C235.474 118.361 234.054 121.806 234.06 125.395ZM129.578 185.799C129.641 217.791 155.623 243.666 187.608 243.605C219.593 243.544 245.487 217.565 245.426 185.573C245.365 153.581 219.377 127.699 187.387 127.762C155.397 127.825 129.517 153.811 129.578 185.799ZM149.897 185.758C149.882 178.321 152.073 171.046 156.193 164.854C160.313 158.663 166.176 153.831 173.041 150.972C179.906 148.112 187.466 147.352 194.763 148.789C202.06 150.225 208.767 153.793 214.036 159.042C219.306 164.29 222.9 170.983 224.366 178.275C225.831 185.566 225.101 193.128 222.269 200.005C219.436 206.882 214.628 212.764 208.453 216.908C202.277 221.052 195.012 223.272 187.574 223.287C182.636 223.297 177.744 222.334 173.178 220.454C168.612 218.573 164.461 215.812 160.962 212.327C157.463 208.842 154.685 204.702 152.787 200.143C150.888 195.584 149.906 190.696 149.897 185.758Z"/>

@lorumic
Copy link
Contributor

lorumic commented Feb 21, 2024

Ah, wait - what I mentioned in the suggestions above is not enough. You actually need to edit the _pattern_lists.scss file and add custom hover styles for instagram there. See for example how this is done for the linkedin icon:

[...]
  $color-linkedin: #0274b3;
[...]
      &--linkedin {
        @extend %list-link;

        &:hover .linkedin-icon {
          fill: $color-linkedin;
        }
      }

With this, you should be able to get the consistent hover effect for the Instagram icon as well. Feel free to confirm the right hex code for the instagram bg color with someone in visuals if you're unsure. :) @lizzochek

@lizzochek
Copy link
Contributor Author

@lorumic updated

@lizzochek lizzochek merged commit 90b48f8 into canonical:main Feb 23, 2024
14 of 16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lorumic lorumic lorumic approved these changes

Assignees
No one assigned
Labels
Review: Code +1 Review: QA +1
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Instagram not listed as a social media on ubuntu.com
3 participants
@lizzochek @webteam-app @lorumic