Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6921 | Rev 6926 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 6921 Rev 6922
Línea 20... Línea 20...
20 
  border-radius: var(--border-radius);
 20 
  border-radius: var(--border-radius);
21 
  border: 1px solid var(--border-primary);
 21 
  border: 1px solid var(--border-primary);
22 
  height: 80vh;
 22 
  height: 80vh;
23 
  display: flex;
 23 
  display: flex;
24 
  flex-direction: column;
 24 
  flex-direction: column;
- 
 
 25 
  flex-grow: 1;
25 
`
 26 
`
Línea 26... Línea 27...
26 
 
 27 
 
27 
const StyledChatHeader = styled.div`
 28 
const StyledChatHeader = styled.div`
28 
  border-bottom: 1px solid var(--border-primary);
 29 
  border-bottom: 1px solid var(--border-primary);
Línea 45... Línea 46...
45 
  width: fit-content;
 46 
  width: fit-content;
46 
  max-width: 30ch;
 47 
  max-width: 30ch;
47 
  text-align: center;
 48 
  text-align: center;
48 
`
 49 
`
Línea 49... Línea 50...
49 
 
 50 
 
- 
 
 51 
const StyledMessageList = styled.div`
50 
const StyledMessageContainer = styled.div`
 52 
  gap: 0.5rem;
51 
  display: flex;
 53 
  display: flex;
52 
  flex-flow: column-reverse;
 54 
  flex-direction: column-reverse;
53 
  height: -webkit-fill-available;
 55 
  height: -webkit-fill-available;
54 
  padding: 0.5rem 0;
 56 
  padding: 0.5rem 0;
55 
  overflow: auto;
 57 
  overflow: auto;
Línea 56... Línea -...
56 
`
 - 
 
57 
 
 - 
 
58 
const StyledMessageList = styled.div`
 - 
 
59 
  display: flex;
 - 
 
60 
  flex-direction: column;
 - 
 
61 
  gap: 0.5rem;
 - 
 
62 
`
 58 
`
63 
 
 59 
 
64 
const Chat = ({ children }) => {
 60 
const Chat = ({ children }) => {
Línea 65... Línea 61...
65 
  return <StyledChatContainer>{children}</StyledChatContainer>
 61 
  return <StyledChatContainer>{children}</StyledChatContainer>
Línea 110... Línea 106...
110 
      observer.disconnect()
 106 
      observer.disconnect()
111 
    }
 107 
    }
112 
  }, [messages])
 108 
  }, [messages])
Línea 113... Línea 109...
113 
 
 109 
 
114 
  return (
 110 
  return (
115 
    <StyledMessageContainer ref={scrollRef}>
 - 
 
116 
      <StyledMessageList>
 - 
 
117 
        {pages > currentPage && !loading && <p ref={loadMoreEl}>Cargando...</p>}
 111 
    <StyledMessageList ref={scrollRef}>
118 
        {messages.map((message) => (
 112 
      {messages.map((message) => (
119 
          <List.Message message={message} key={message.id} />
 113 
        <List.Message message={message} key={message.id} />
120 
        ))}
 114 
      ))}
121 
      </StyledMessageList>
 115 
      {pages > currentPage && !loading && <p ref={loadMoreEl}>Cargando...</p>}
122 
    </StyledMessageContainer>
 116 
    </StyledMessageList>
123 
  )
 117 
  )
Línea 124... Línea 118...
124 
}
 118 
}
125 
 
 119