SIDRA400 Improving the Domino Blog Home Page before changing more HTML Templates

Improving the Domino Blog Home Page before changing more HTML Templates

Martin Ortega

30 Diciembre 2021

He hecho algunos cambios en el ejemplo que puse ayer para descargar
La Home Page tiene ahora un diseño Responsive, pero las entradas no, me explico.
Si usas un iPhone para ver el blog, tendrás de desplazarte mucho para llegar al final, las entradas muestran todo su contenido, en los nuevos cambios ya no es así.
Ya se que el blog tiene una opción para evitar esto, la acción "Continue Reading Marker" valdría para evitar el documento completo en la Home, pero yo lo quiero hacer de forma automática.
En la base de datos de ayer he incluido esta acción en un par de documentos.

Pongo el enlace para verlo

Ahora voy a poner el enlace en al nuevo ejemplo, no quiero entrar en si el diseño es más bonito o más feo, lo que quiero comentar es como funciona este nuevo ejemplo.
Primero pongo el enlace y después lo comento

Enlace al nuevo ejemplo

Cuál es la diferencia entre las dos bases de datos ???
La nueva tiene un nuevo ITEM Template que solo incluye el campo "description" del formulario CONTENT NOTES.
Este campo no se usa pero tiene contenido, así funciona el blog original, (en versiones anteriores si se usaba)
Por esa razón en el nuevo ejemplo vemos que los cuatro últimos documentos solo muestran el contenido del campo description pero como cuando se crearon no tenían el nuevo código solo muestran lo que se ve ahora.
Pregunta:
Entonces si cambio el formulario CONTENT NOTES voy a tener que recrear el contenido de todas la entradas de mi blog ????
Respuesta:
No ¡¡¡¡
Solo los que muestra la Home, las nuevas entradas ya usarán el nuevo código.

Ahora la hoja de estilos solo tiene el código que usa, la de ayer tenía "cosas raras" que uso en otras bases de datos.
También tenía 6 tamaños, ahora solo tiene tres, iPhone, iPad y Mac

Voy a contar un poco como cambiar el diseño de tu Home:
Por ejemplo, ahora en tamaño Mac muestra dos entradas y tú solo quieres una entrada por línea, como se cambia eso ???
Fácil, busca este código en la CSS tamaño 3

#boxitem {display: inline-block;text-align:left;color:#696969;
padding:0px;width: 49% ;margin:0px ;vertical-align:top; }
#boxitem2 {margin:10px 20px 0px 0px ;padding:10px 3px;border-top: 2px solid #ddd ;
vertical-align:top; }

Si cambias 49% por 100% solo mostrará un entrada por línea
Podría contar alguna cosa más de la nueva antes quiero contar lo del campo description.
Si quieres usar este nuevo diseño tendrás que cambiar cosas en el CONTENT NOTES pero una buena opción es que no toques tu formulario, hazle un rename.
Añade el que he incluido en esta NSF
Pégala en tu base de datos, que no te gusta ??? bórrala y vuelve a hacer una rename a tu formulario con el el nombre original (CONTENT NOTES)
Riesgos cero, si no te fías de mi (cosa que me parece normal) haz primero una copia de tu blog, no sería mala cosa aunque lo que te propongo no tiene ningún riesgo

Qué contiene ahora el DEFAUL ITEM ???
Esto:

<div id="boxitem">
<div id="boxitem2">
<$DXItemDescription$>
<div id="commentmini"><i class="fa fa-comment" style="padding:0 5px 0 0"></i><span><$DXCommentCount$></span>
<span><$DXInlineCommentLink$></span></div>
</div>
</div>

Pregunta
Por qué ahora solo veo tres líneas de texto por entrada ???
Respuesta

#content{display:inline-block;width: 100%;text-align:left;padding:0 10px 0 0px;margin:10px 0 0 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;}

Cambia el valor "3" para mostrar la líneas que quieras, ya sabes que cada tamaño (@media) puede tener un valor diferente, tú mismo

Pregunta
Por qué el título de la entrada está un poco raro ???
Respuesta

ul#enlacesubject{min-height:45px;text-align: left;margin:0px 10px 0px 0px ;padding:0px ;font-size:130%;
display:inline-block;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden}
ul#enlacesubject li a{padding:0px;text-decoration:none;}
ul#enlacesubject li a:hover{color:#696969}

Soy un poco maniático con estas cosas, lo de min-height:45px (solo unsado en resolución Mac) trata de minimizar un poco el problema de que las entradas muestren diferentes alturas.
También podéis ver que limito de número de líneas de la entrada, manías mías.

Pregunta
Cuál es ahora el contenido del campo description ???
Lo que ves en verde es el código que añade el botón "CONTENT" del nuevo formulario

<ul id="enlacesubject">
<li><a href="2812202113313245MOREDJ.htm">Hello world 3</a></li></ul>
<span class="autormini">Martin Ortega</span>
<i class="fa fa-calendar fa-fw w3"></i><span class="fechamini">28/12/2021</span>
<div id="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus ...</div>
<ul id="readfullpost">
<li><a href="2812202113313245MOREDJ.htm">Read more >></a></li></ul>

Hay más texto del que muestra porque está limitado por el número de líneas que comenté antes
No más preguntas de momento señoría
========= ========= ========= =========
ENGLISH (Google translate, OF COURSE)
I have made some changes to the example that I put yesterday to download
The Home Page now has a Responsive design, but the entries do not, let me explain.
If you use an iPhone to view the blog, you will have to scroll a lot to reach the end, the entries show all its content, in the new changes it is no longer the case.
I know that the blog has an option to avoid this, the action "Continue Reading Marker" would be valid to avoid the entire document in the Home, but I want to do it automatically.
In yesterday's database I have included this action in a couple of documents.

link to the NSF

Now I'm going to put the link in the new example, I don't want to go into whether the design is prettier or uglier, what I want to comment on is how this new example works.
First I put the link and then I comment on it

Link to the new NSF

What is the difference between the two databases ???
The new one has a new ITEM Template that only includes the "description" field of the CONTENT NOTES form.
This field is not used but it has content, this is how the original blog works, (in previous versions if it was used)
For that reason in the new example we see that the last four documents only show the content of the description field but since when they were created they did not have the new code, they only show what is seen now.

Question:
So if I change the CONTENT NOTES form I will have to recreate the content of all my blog entries ????
Answer:
No ¡¡¡
Only the ones that the Home shows, the new entries will already use the new code.

Now the stylesheet only has the code it uses, yesterday's had "weird stuff" that I use in other databases.
It also had 6 sizes, now it only has three, iPhone, iPad and Mac

I'm going to tell a little about how to change the design of your Home:
For example, now in Mac size it shows two entries and you only want one entry per line.
How do you change that ???
Easy, look for this code in the CSS size 3

#boxitem {display: inline-block; text-align: left; color: # 696969;
padding: 0px; width: 49%; margin: 0px; vertical-align: top; }
# boxitem2 {margin: 10px 20px 0px 0px; padding: 10px 3px; border-top: 2px solid #ddd;
vertical-align: top; }

If you change 49% to 100% it will only show one entry per line

I could tell something more about the new one. Before I want to tell about the description field.
If you want to use this new design you will have to change things in the CONTENT NOTES but a good option is that you do not touch your form, give it a rename.
Add the one included in this NSF
Paste it in your database, what do you not like ??? delete it and rename your form with the original name (CONTENT NOTES)
Zero risks, if you do not trust me (which seems normal to me) make a copy of your blog first, it would not be a bad thing, although what I propose does not have any risk

What does the DEFAUL ITEM now contain ???
This:

<div id = "boxitem">
<div id = "boxitem2">
<$ DXItemDescription $>
<div id = "commentmini"> <i class = "fa fa-comment" style = "padding: 0 5px 0 0"> </i> <span> <$ DXCommentCount $> </span>
<span> <$ DXInlineCommentLink $> </span> </div>
</div>
</div>

Question
Why am I only seeing three lines of text per post now ???
Answer

#content {display: inline-block; width: 100%; text-align: left; padding: 0 10px 0 0px; margin: 10px 0 0 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;}

Change the value "3" to show the lines you want, you already know that each size (@media) can have a different value, yourself

Question
Why is the post title a bit weird ???
Answer

ul # linksubject {min-height: 45px; text-align: left; margin: 0px 10px 0px 0px; padding: 0px; font-size: 130%;
display: inline-block;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden}
ul # linksubject li a {padding: 0px; text-decoration: none;}
ul # linksubject li a: hover {color: # 696969}

I'm a bit of a freak about these things, the min-height: 45px thing (only one size in Mac resolution) tries to minimize the problem of inputs showing different heights a bit.
You can also see that I limit the number of lines of the entry, my manias.

Question
What is now the content of the description field ???
What you see in green is the code that adds the "CONTENT" button of the new form

<ul id = "linksubject">
<li> <a href="2812202113313245MOREDJ.htm"> Hello world 3 </a> </li> </ul>
<span class = "autormini"> Martin Ortega </span>
<i class = "fa fa-calendar fa-fw w3"> </i> <span class = "minidate"> 12/28/2021 </span>
<div id = "content"> Lorem ipsum ad his scripta blandit departing, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo he dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit defined years. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem pains. Quo no falli viris intellegam, ut fugit veritus ... </div>
<ul id = "readfullpost">
<li> <a href="2812202113313245MOREDJ.htm"> Read more >> </a> </li> </ul>

There is more text than it shows because it is limited by the number of lines I commented before.
No more questions for now.

I think I don't need to share anything, everything you need is here, I'm not going to put a new NSF to download, it's not necessary
The content of new ITEM DEFAULT is in is in this entry
You can copy the CSS in the link of the new database.
The "CONTENT" button scripts ???
The people who have asked me for the previous examples already have it, although I have taken away many things, for example the image.
I put here in new code just in case.

Sub Click(Source As Button)
Dim w As New notesuiworkspace
Dim s As New notessession
Dim db As notesdatabase
Dim uidoc As notesuidocument
Dim note As notesdocument
Dim cuenta As Integer
Dim item As NotesItem
Dim wnpweb As String
Set s = New NotesSession
Set db =s.currentdatabase
Set uidoc=w.currentdocument
Set note=uidoc.document
Set w = New NotesUIWorkspace
Set item = note.GetFirstItem( "description" )
page = uidoc.FieldGetText( "pagename" )
titulo = uidoc.FieldGetText( "Subject" )
autor = uidoc.FieldGetText( "Author" )
fecha = uidoc.FieldGetText( "creation" )
contenido = GetContent(uidoc.FieldGetText( "content" ) )
Call item.AppendToTextList("<ul id="+Chr(34)+"enlacesubject"+Chr(34)+">"+Chr(13))
Call item.AppendToTextList("<li><a href="+Chr(34)+page+Chr(34)+">"+titulo+"</a></li></ul>"+Chr(13))
Call item.AppendToTextList("<span class="+Chr(34)+"autormini"+Chr(34)+">"+autor+"</span>"+Chr(13))
Call item.AppendToTextList("<i class=" +Chr(34)+"fa fa-calendar fa-fw w3"+Chr(34)+"></i>"+"<span class="+Chr(34)+"fechamini"+Chr(34)+">"+fecha+"</span>"+Chr(13))
Call item.AppendToTextList("<div id="+Chr(34)+"content"+Chr(34)+">"+contenido+"</div>"+Chr(13))
Call item.AppendToTextList("<ul id="+Chr(34)+"readfullpost"+Chr(34)+">"+Chr(13))
Call item.AppendToTextList("<li><a href="+Chr(34)+page+Chr(34)+">Read more >></a></li></ul>"+Chr(13))
Call uidoc.RefreshHideFormulas
End Sub

Private Function GetContent(content As String) As String
If Len(content) < 440 Then
GetContent = content
Else
GetContent = Left$(content, 436) & " ..."
End If
End Function

Clear button
Now your posts have content, press the clear button before pressing the Content button, I remind you that this should only be done only in the entries that the Home Page shows

FIELD description :="";
@Command ([RefreshHideFormulas])

Important, very important ¡¡¡
Now the field "desc_lock" has a default value "No", you must change it to "yes"

To be continue .........

Blog for Dummies Blog para Torpes

Quedará pendiente de aprobación

Sin comentarios (de momento)

Deja tu comentario

Autor SIDRA400