Merge branch 'main' into refactor/controller-de-notificações

Gemfile

@@ -13,6 +13,7 @@ gem 'devise'
 
 gem 'faker'
 gem 'faraday'
+gem 'friendly_id', '~> 5.5.0'
 gem 'image_processing', '>= 1.2'
 gem 'jbuilder'
 gem 'jsbundling-rails'

Gemfile.lock

@@ -136,6 +136,8 @@ GEM
       webrick (~> 1.7)
       websocket-driver (>= 0.6, < 0.8)
     ffi (1.16.3)
+    friendly_id (5.5.1)
+      activerecord (>= 4.0.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.1)
@@ -339,6 +341,7 @@ DEPENDENCIES
   factory_bot_rails
   faker
   faraday
+  friendly_id (~> 5.5.0)
   image_processing (>= 1.2)
   jbuilder
   jsbundling-rails

Procfile.dev

@@ -1,3 +1,4 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
 js: yarn build --watch
 css: yarn watch:css
+job: bundle exec rake solid_queue:start

README.md

@@ -6,6 +6,7 @@ O Portfoliorrr é uma rede social com funcionalidades de portfólio para pessoas
 
 - [Informações técnicas](https://github.com/TreinaDev/td11-portfoliorrr?tab=readme-ov-file#informa%C3%A7%C3%B5es-t%C3%A9cnicas)
 - [Como configurar a aplicação](https://github.com/TreinaDev/td11-portfoliorrr?tab=readme-ov-file#como-configurar-a-aplica%C3%A7%C3%A3o)
+- [Ver emails enviados em ambiente de desenvolvimento](https://github.com/TreinaDev/td11-portfoliorrr?tab=readme-ov-file#ver-emails-enviados-em-ambiente-de-desenvolvimento)
 - [Como visualizar a aplicação no navegador](https://github.com/TreinaDev/td11-portfoliorrr?tab=readme-ov-file#como-visualizar-a-aplica%C3%A7%C3%A3o-no-navegador)
 - [Documentação da API](https://github.com/TreinaDev/td11-portfoliorrr?tab=readme-ov-file#documenta%C3%A7%C3%A3o-da-api)
 
@@ -21,12 +22,31 @@ O Portfoliorrr é uma rede social com funcionalidades de portfólio para pessoas
 - Rode o comando `bin/setup` e aguarde sua conclusão;
 - Rode o comando `yarn install` (necessário ter `node` instalado em sua máquina);
 
+## Populando o banco de dados
+
+- O seed comum, para desenvolvimento, pode ser feito normalmente com `rails db:seed`
+- Para apresentações e testes de front-end, é possível fazer um superseed, utilizando `rails db:seed:superseed`
+- O superseed utiliza as gems Faker e FactoryBot, que são instaladas durante a configuração (ver item anterior)
+
 ## Como visualizar a aplicação no navegador
 
 - Siga as instruções de configuração da aplicação
 - Rode o comando `bin/dev`;
 - Acesse a aplicação através do endereço `http://localhost:4000/`
 
+## Ver emails enviados em ambiente de desenvolvimento
+
+- Siga as instruções de configuração da aplicação;
+- Instale localmente a gem `mailcatcher` executando o comando abaixo:
+```shell
+gem install mailcatcher 
+```
+- Execute o comando abaixo para iniciar o `mailcatcher`
+```shell
+mailcatcher
+```
+- Acesse o MailCatcher através do endereço `http://localhost:1080`. Todos e-mails enviados serão mostrados nessa página, que emula uma caixa de entrada.
+
 ## Como rodar os testes da aplicação
 
 - Siga as instruções de configuração da aplicação

app/assets/stylesheets/application.bootstrap.scss

@@ -2,7 +2,7 @@ $theme-colors: (
   "primary":    #a130fd,
   "secondary":  #515253,
   "success":    #2abd4cde,
-  "info":       #68a1f7,
+  "info":       #8fd0f5,
   "warning":    #ffc107,
   "danger":     #dc3545,
   "light":      rgba(255, 251, 251, 0.603),
@@ -18,83 +18,3 @@ $primary: #a130fd;
 @import 'posts.scss';
 @import 'profile.scss';
 @import 'layout.scss';
-
-body{
-  min-width: 400px;
-}
-
-input[type="checkbox"]:checked {
-  background-color: #a130fd !important;
-}
-
-.feed-post:hover{
-  transform: scale(1.01, 1.01);
-  transition-duration: 300ms;
-}
-
-.img-cover{
-  object-fit: cover;
-  object-position: center;
-}
-
-.field_with_errors input{
-  border: 1px solid red !important;
-}
-
-.home_logo{
-  width: 12rem;
-  margin: 0 7rem 0 7rem;
-}
-
-.drop-menu{
-  margin-right: 2.5rem !important;
-}
-
-#searchText{
-  width: 380px !important;
-}
-
-.dropdown-menu[data-bs-popper]{
-  left: -20px !important;
-}
-
-.follower-card:hover{
-  transform: scale(1.01, 1.01);
-  transition-duration: 300ms;
-}
-
-.profile-image{
-   min-width: 80px;
-}
-
-.trix-content{
-  color: rgb(10, 10, 10);
-}
-
-.dropdown-item:active {
-  background-color: #9030df !important; 
-}
-
-.categories{
-  width: 35% !important;
-}
-
-.highlighted {
-  transform: scale(1.01s);
-  background-color: hsla(256, 85%, 82%, 0.2);
-  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
-  transition: 
-              transform 1.5s ease-in-out,
-              box-shadow 1.5s ease-in-out,
-              background-color 1.5s ease-in-out;
-}
-
-[id^='comment_'] {
-  transform: reset;
-  background-color: reset;
-  box-shadow: reset;
-  transition: 
-              transform 1s ease-in-out,
-              box-shadow 1s ease-in-out,
-              background-color 1s ease-in-out;
-}

app/assets/stylesheets/layout.scss

@@ -1,5 +1,10 @@
+:root{
+  font-size: 0.8rem;
+}
+
 body{
   min-width: 400px;
+  background-color: #F6F7F8 !important;
 }
 
 ul{
@@ -26,3 +31,73 @@ input[type="checkbox"]:checked {
 .categories{
   width: 35% !important;
 }
+
+.most-followed-users{
+  size: 22rem;
+  margin-top: 0.15rem;
+}
+
+.home-cards-title{
+  margin-bottom: 2px !important;
+}
+
+.home-cards{
+  padding: 1rem !important;
+  margin-bottom: 2px !important;
+}
+
+.home-cards a{
+  text-decoration: none !important;
+}
+
+.highlighted {
+  transform: scale(1.01s);
+  background-color: hsla(256, 85%, 82%, 0.2);
+  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
+  transition: 
+              transform 1.5s ease-in-out,
+              box-shadow 1.5s ease-in-out,
+              background-color 1.5s ease-in-out;
+}
+
+[id^='comment_'] {
+  transform: reset;
+  background-color: reset;
+  box-shadow: reset;
+  transition: 
+              transform 1s ease-in-out,
+              box-shadow 1s ease-in-out,
+              background-color 1s ease-in-out;
+}
+
+.page-header{
+  margin: 0 -0.66rem 0 -0.66rem;
+}
+
+.search-result-title:hover{
+  text-decoration: underline !important;
+}
+
+.edit-button{
+  margin-left: 8rem !important;
+}
+
+.page-title{
+  margin-left: 15.4%;
+  margin-right: 15.4%;
+}
+
+.project-search{
+  margin-left: 24.9%;
+  margin-right: 24.9%;
+}
+
+.invitation-request-title{
+  margin-left: 7%;
+  margin-right: 7%;
+}
+
+.notifications{
+  margin-left: 21% !important;
+  margin-right: 21% !important;
+}

app/assets/stylesheets/navbar.scss

@@ -7,5 +7,22 @@
 }
 
 .dropdown-item:active {
-  background-color: #9030df !important; 
+  background-color: #9030df !important;
+}
+
+.personal-info-visibility{
+  list-style: disc !important;
+}
+
+.notification-badge{
+  position: absolute;
+  right: 5% !important;
+}
+
+.badge-container{
+  position: relative !important;
+}
+
+.dropdown-profile-picture{
+  width: 5rem !important;
 }

app/assets/stylesheets/posts.scss

@@ -5,4 +5,49 @@
 
 .trix-content{
   color: rgb(10, 10, 10);
+  text-align: left !important;
+}
+
+.post-title{
+  font-size: 1.8rem;
+}
+
+figure.attachment{
+  width: 50% !important;
+}
+
+.share-link{
+  width: 15rem;
+}
+
+.home-publication-button{
+  width: 25vw !important;
+  margin-right: 5rem;
+  text-align: left !important;
+}
+
+.comment-message, .reply-form{
+  margin-left: 5.2rem !important;
+}
+
+.comment-actions{
+  margin-left: 5.0rem !important;
+}
+
+.reply-content{
+  margin-left: 4.5rem !important;
+}
+
+.reply-form{
+  min-width: 350px;
+}
+
+.reply-collapser{
+  margin-left: 4.8rem !important;
+  color: #065fd4 !important;
+  font-size: medium;
+}
+
+.reply-content, .comment-message{
+  font-size: small;
 }

app/assets/stylesheets/profile.scss

@@ -3,11 +3,32 @@
   transition-duration: 300ms;
 }
 
-.profile-image{
-   min-width: 80px;
-}
-
 .img-cover{
   object-fit: cover;
   object-position: center;
+}
+
+.profile-header-title{
+  margin: 0 -0.66rem 0.66rem -0.66rem;
+}
+
+.profile-header-picture{
+  transform: translateY(-50%);
+}
+
+.profile-picture{
+  background-color: #F6F7F8 !important;
+}
+
+.profile-card-body{
+  color: #F6F7F8 !important;
+}
+
+.profile-info-content{
+  font-size: 1.11rem;
+  margin-left: 2.12rem;
+}
+
+.profile-info-title{
+  margin-left: 2rem !important;
 }