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 .........
Sin comentarios (de momento)

Autor SIDRA400

Mi nombre es Martín Ortega Novella, vivo en Asturias, casi toda mi vida laboral ha sido en IBM, pero ya estoy jubilado.
Siempre he utilizado Lotus Notes/Domino para mi blog, donde me he sentido más cómodo ha sido cuando estaba alojado en mi AS/400, ahora está en un iMac
Durante un año utilicé IBM WebSphere Portal Server, un gran producto pero volví a usar Lotus / Notes porque es lo que más gusta.
SIDRA400 es miembro del ESLUG (Spanish HCL Domino User Group).